react-native trpc always loading

Question

I have tried using trpc with the fastify integration, and it works fine.
However, when I tried using it in my react-native app, it does not work (it already worked with next.js) 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>
  );
};