TRPCClientError prior to the request being sent (v11, App Router)

"use client";
import { createContext } from "react";
import { clientApi } from "../trpc/react";
import { RouterOutputs } from "@acme/api";
import { getQueryClient } from "@trpc/react-query/shared";

type CurrentUser = RouterOutputs["authentication"]["me"];

export const UserContext = createContext<CurrentUser>(null);

export const UserContextProvider = ({
  children,
  initialData,
}: {
  children: React.ReactNode;
  initialData: CurrentUser;
}) => {
  const utils = clientApi.useUtils();
  const userQuery = clientApi.authentication.me.useQuery(undefined, {});
  return <pre>{JSON.stringify(userQuery, null, 2)}</pre>;
};