Pre-rendering Error with TRPC useSuspenseQuery – "fetch failed" During Build

import { Greeting } from "@/components/greeting";
import { ErrorBoundary } from "next/dist/client/components/error-boundary";
import { ErrorFallback } from "@/components/error-fallback";
import { Suspense } from "react";
// Note: Prefetching the data (e.g., using prefetch(trpc.greeting.hello.queryOptions()))
// prevents the error, but this approach is not acceptable as per current requirements.
export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <ErrorBoundary errorComponent={ErrorFallback}>
        <Suspense fallback={<div>Loading...</div>}>
          <Greeting />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

"use client";
import { useTRPC } from "@/trpc/client";
import { useSuspenseQuery } from "@tanstack/react-query";
import React from "react";
export const Greeting = () => {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.greeting.hello.queryOptions());

  return <div>{data}</div>;
};