Playwright mount timeout error using React and TypeScript [closed]

Using React and Ts, I am getting: Test timeout of 30000ms exceeded. Error: page._wrapApiCall: Test timeout of 30000ms exceeded when trying to mount with :

test("renders selected date", async ({ mount }) => {
  const ctx = makeMockCalendarContext({
    selectedDate: "2025-02-02",
  });

  const component = await mount(
    <MemoryRouter initialEntries={["/daily-graph"]}>
      <ContextWrapper ctx={ctx}>
        <HeaderComponent />
      </ContextWrapper>
    </MemoryRouter>
  );

  await expect(component.getByTestId("header-date")).toHaveText("2025-02-02");
});

The CT config is running but the Component being tested is not, and neither are the mocks. Can't get it.

I have tried isolating the problem with comments, rewriting everything over and over again and changing directories for the mocks. I simplified the problem by removing E2E config. I changed the mocks to make the mount simpler and tried different mount tests. Here is the Component Config file:

// playwright-ct.config.ts
import { defineConfig } from "@playwright/experimental-ct-react";
import path from "path";
import { fileURLToPath } from "url";

console.log("🔥 PLAYWRIGHT CT CONFIG LOADED");
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default defineConfig({
  testDir: "./tests-ct",

  use: {
    ctPort: 3100,

    ctViteConfig: {
      resolve: {
        alias: {
          // THESE MUST MATCH HEADERCOMPONENT IMPORTS EXACTLY
          "./hooks/useLogout":
            path.resolve(__dirname, "tests-ct/mocks.ts"),
          "./hooks/useMobileBreakpoint":
            path.resolve(__dirname, "tests-ct/mocks.ts"),
          "./logout/setupLogoutBroadcast":
            path.resolve(__dirname, "tests-ct/mocks.ts"),
        },
      },
    },
  },
});