Composable Fixture | Fixture dependent on another fixture

https://playwright.dev/docs/test-fixtures#with-fixtures says fixtures have advantages over before/after hooks, eg Fixtures are composable - they can depend on each other to provide complex behaviors. But how to implement that. Let's say we have two simple fixtures fixtureA and fixtureB present in two different files. How can we make fixtureB dependent on fixtureA. Tried something like below but it does not work. Appreciate any inputs on this.

//fixtureA.ts

import { test as base } from "@playwright/test";

export * from "@playwright/test";

type FixtureData = {
  fixtureA: string;
};

export const test = base.extend<FixtureData>({
  fixtureA: async ({}, use) => {
    //Use the fixture in the tests
    const fixtureAValue = "fixtureA";
    await use(fixtureAValue);
  },
});

fixtureb.ts

import { Page, test as base } from "./fixtureA";

export * from "@playwright/test";

type FixtureData = {
  fixtureB: Page;
};

export const test = base.extend<FixtureData>({
  // eslint-disable-next-line no-empty-pattern
  fixtureB: async ({ fixtureA, page }, use) => {
    //Use the fixture in the tests
    console.log(fixtureA);
    await use(page);
  },
});