Wrapper Component: Unable to retrieve application context.

Question

Hello tRPC-Community,
I have ran into a funny "issue" while gaining my first experiences with tRPC.

If I want to use tRPC in a React Component the documentation states that the Component should be wrapped by some Helper-Component from react-query.
Now I want to be as flexible as possible and only want to "declare" the Wrapper-Component once:
QueryWrapper.tsx:
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}

);
}

I always get the Error you see in the Picture.
Now to the weird part, as soon as I "use" the wrapper differently it works:
  ...
  return (
    <trpcReact.Provider client={trpcClient} queryClient={queryClient}
      <QueryClientProvider client={queryClient}

);

Now that makes the wrapper completely unflexible. What basically is the issue.
Does anybody know why? This makes using tRPC very uncomfortable and repetitive...

Thank you in advance!
~Max

Wrapper Component: Unable to retrieve application context.

Looking for more? Join the community!