Wrapper Component: Unable to retrieve application context.

import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { QueryClientProvider, QueryClient} from "@tanstack/react-query"
import { trpcReact } from '@/trpc';

export default function QueryWrapper({children}) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
  trpcReact.createClient({
    links: [
      httpBatchLink({
        url: 'http://localhost:4321/api/trpc',
        // You can pass any HTTP headers you wish here
        async headers() {
          return {};
        },
      }),
    ],
    transformer: undefined
  }),
);
  return (
    <trpcReact.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {children}
      </QueryClientProvider>
    </trpcReact.Provider>
  );
}

  ...
  return (
    <trpcReact.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <TestComponent />
      </QueryClientProvider>
    </trpcReact.Provider>
  );