`useSuspenseQuery` returns unexpected `.json` and `.metadata` (SuperJSON)

export const makeQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 30 * 1000,
      },
      dehydrate: {
        serializeData: SuperJSON.serialize,
        shouldDehydrateQuery: (query) =>
          defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
      },
      hydrate: {
        deserializeData: SuperJSON.deserialize,
      },
    },
  });

const getQueryClient = React.cache(makeQueryClient);
export const createTRPC = async (slug?: string) => {
    const headersList = await headers();
    const ctx = await createContext(headersList, slug);
    
    return createTRPCOptionsProxy({
        ctx,
        router: appRouter,
        queryClient: getQueryClient(),
    });
};

...

function async MyComponent() {
  const trpc = await createTRPC(slug);
  void prefetch(trpc.story.listByPublication.queryOptions());
}

'use client';

export default function MyClientComponent(props: { slug: string }) {
  const trpc = useTRPC();
  const { data } = useSuspenseQuery(trpc.story.listByPublication.queryOptions());