react-native trpc always loading

I tried to use trpc with the fastify adapter and it works just fine; however, when I tried to use in in my react native app it does not work (it already woked with nextjs). It only displays loading as a status.

const getBaseUrl = () => {  const localhost = Constants.manifest?.debuggerHost?.split(":")[0];  if (!localhost)    throw new Error("failed to get localhost, configure it manually");  return `http://${localhost}:3000/trpc`;};export const TRPCProvider: React.FC<{ children: React.ReactNode }> = ({  children,}) => {  console.log(getBaseUrl())  const [queryClient] = useState(() => new QueryClient());  const [trpcClient] = useState(() =>    trpc.createClient({      links: [        httpBatchLink({          url: `${getBaseUrl()}`,        }),      ],    }),  );  return (<trpc.Provider client={trpcClient} queryClient={queryClient}><QueryClientProvider client={queryClient}>        {children}</QueryClientProvider></trpc.Provider>  );};export const TRPCProvider: React.FC<{ children: React.ReactNode }> = ({  children,}) => {  console.log(getBaseUrl())  const [queryClient] = useState(() => new QueryClient());  const [trpcClient] = useState(() =>    trpc.createClient({      links: [        httpBatchLink({          url: `${getBaseUrl()}`,        }),      ],    }),  );  return (<trpc.Provider client={trpcClient} queryClient={queryClient}><QueryClientProvider client={queryClient}>        {children}</QueryClientProvider></trpc.Provider>  );};