TypeError: Cannot read property 'useState' of null

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { trpc } from "../trpc";
import { useState } from "react";
import { httpBatchLink } from "@trpc/react-query";

export function TRPCOwnProvider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: "http://localhost:3000/trpc",
          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              // authorization: getAuthCookie(),
            };
          },
        }),
      ],
    })
  );

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

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@chatclub/backend';

export const trpc = createTRPCReact<AppRouter>();

// Import your global CSS file
import React, { useState } from "react";
import "../global.css";
import { Stack } from "expo-router/stack";
import { TRPCOwnProvider } from "$/components/TRPCOwnProvider";

const AppLayout = () => {
  return (
    <TRPCOwnProvider>
      <Stack/>
    </TRPCOwnProvider>
  )
};

export default AppLayout;

import * as React from "react";
import { View, ScrollView, StyleSheet, TextInput } from "react-native";
import { Appbar, Text, Button } from "react-native-paper";
import { trpc } from '../trpc';

const ChatRoomScreen = () => {
  console.log('chatroomScreen')
  const hello = trpc.hello.useQuery('Chatclub');
  const sendMessageMutation = trpc.sendMessage.useMutation();
  ...

{
  "name": "@chatclub/frontend",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "trustedDependencies": [],
  "dependencies": {
    "@tanstack/react-query": "^5.51.1",
    "@trpc/client": "^11.0.0-rc.461",
    "@trpc/react-query": "^11.0.0-rc.461",
    "ajv": "^8.13.0",
    "expo": "~51.0.8",
    "expo-build-properties": "^0.12.1",
    "expo-constants": "~16.0.1",
    "expo-dev-client": "~4.0.14",
    "expo-doctor": "^1.6.1",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.14",
    "tailwindcss": "^3.4.3"
  },
  "private": true
}

TypeError: Cannot read property 'useState' of null

This error is located at:
    in TRPCProvider (created by TRPCOwnProvider)
    in TRPCOwnProvider (created by AppLayout)
    in AppLayout
    in Unknown (created by Route())
    in Suspense (created by Route())
    in Route (created by Route())
    in Route() (created by ContextNavigator)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by wrapper)
    in wrapper (created by ContextNavigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by ContextNavigator)
    in ContextNavigator (created by ExpoRoot)
    in ExpoRoot (created by App)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (created by withDevTools(ErrorOverlay))
    in withDevTools(ErrorOverlay)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in RCTView (created by CssInterop.View)
    in CssInterop.View (created by AppContainer)
    in AppContainer
    in main(RootComponent)