Expo + trpc: Uncaught Error: No QueryClient set, use QueryClientProvider to set one

Question

I have an issue with expo and trpc. I'm trying to spin up this stack for my application and have fully working type-checking. And so far it is working on iOS simulator but not on the web.

So is my app.tsx

export default function App() {
  return (
    <AuthenticationProvider>
      <TRPCProvider>
        <ThemeProvider theme={theme}>
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen name="Criteria" component={MovieSearchComponent}/>
              <Stack.Screen name="Results" component={ResultsComponent}/>
            </Stack.Navigator>
          </NavigationContainer>
        </ThemeProvider>
      </TRPCProvider>
    </AuthenticationProvider>
  );
}

my component

import { trpc } from "../../utils/trpc-client";

export function ResultsComponent({navigation, route}) {

  const {data} = trpc.moviesRecommendation.useQuery(
     {
      runtimeMinsMin: 100
    }
  )

trpc-client.ts

import { AppRouter } from "../server/trpc";
import { createTRPCReact, httpLink } from "@trpc/react-query";

export const trpc = createTRPCReact<AppRouter>()

export const trpcClient = trpc.createClient({
  links: [httpLink({url: 'http://localhost:3000/api/trpc'})],
})

and trpc-provider.ts

export function TRPCProvider({children}: PropsWithChildren) {
  const [queryClient] = useState(() => new QueryClient())

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient} contextSharing={true}>
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  )
}

So is the web error while using useQuery:

Uncaught Error: No QueryClient set, use QueryClientProvider to set one
    at Object.useQueryClient (QueryClientProvider.tsx:48:1)
    at Object.useBaseQuery (useBaseQuery.ts:33:1)
    at useQuery (useQuery.ts:139:1)
    at Object.useQuery$1 [as useQuery] (createHooksInternal-808efaa7.mjs:277:1)
    at createHooksInternal-808efaa7.mjs:52:1
    at Object.apply (index-972002da.mjs:18:1)
    at ResultsComponent (results-component.tsx:11:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent (react-dom.development.js:20913:1)
    at beginWork (react-dom.development.js:22416:1)