Suspense confusion

function App() {
  return (
    <>
      <div>Header</div>
      <SuspenseComponent />
      <div>Footer</div>
    </>
  );
}

function SuspenseComponent() {
  const { data } = useSuspenseQuery({
    queryKey: ['key'],
    queryFn: async () => {
      await new Promise((res) => setTimeout(res, 5_000));
      return Math.random();
    },
  });

  return <Suspense fallback={'Loading...'}>{data}</Suspense>;
}