TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null

Question

I'm working to create an app that utilizes openAI and creates a chat bot as part of the project. I am using React, NextJS, typescript and tRPC. I keep getting this error: TypeError: Cannot destructure property 'client' of 'useContext(...)' as it is null. when it attempts to load the chat page after a user signs in.

this is the github repo, on the chatpage branch: https://github.com/Ali-Herrera/your-health-ally/tree/chatpage

It shows the error on useMutation method here:

export const Chat: NextPage = () => {

  const [chatItems, setChatItems] = useState<ChatItem[]>([]);
  const [waiting, setWaiting] = useState<boolean>(false);
  const scrollToRef = useRef<HTMLDivElement>(null);

  const scrollToBottom = () => {
    setTimeout(
      () => scrollToRef.current?.scrollIntoView({ behavior: "smooth" }),
      100
    );
  };

  const generatedTextMutation = api.ai.generateText.useMutation({
    onSuccess: (data) => {
      setChatItems([
        ...chatItems,
        {
          content: data.generatedText,
          author: "AI",
        },
      ]);
    },

    onError: (error) => {
      setChatItems([
        ...chatItems,
        {
          content: error.message ?? "An error occurred",
          author: "AI",
          isError: true,
        },
      ]);
    },

    onSettled: () => {
      setWaiting(false);
      scrollToBottom();
    },
  });

I have the _app page wrapped withTRPC and with QueryClientProvider

export type NextPageWithLayout<
  TProps = Record<string, unknown>,
  TInitialProps = TProps
> = NextPage<TProps, TInitialProps> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

const queryClient = new QueryClient();

const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
  const getLayout =
    Component.getLayout ?? ((page) => <RootLayout>{page}</RootLayout>);
  return (
    <QueryClientProvider client={queryClient}>
      {getLayout(<Component {...pageProps} />)}
    </QueryClientProvider>
  );
};

const AppWithTRPC = withTRPC({
  config: () => ({
    links: [
      httpBatchLink({
        url: 'http://localhost:3000/api/trpc', // replace with your server URL
      }),
    ],
  }),
  ssr: false,
})(MyApp);

export default AppWithTRPC;

and the api object set up like this:

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        httpBatchLink({
          url: `/api/trpc`,
        }),
      ],
    };
  },
  ssr: false,
});

export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;

Thanks in advance this has been a big struggle!

These are the dependencies I'm using:

"dependencies": {
    "@clerk/nextjs": "^4.29.7",
    "@mantine/core": "7.5.3",
    "@mantine/hooks": "^7.5.3",
    "@next/bundle-analyzer": "^14.0.1",
    "@prisma/client": "^5.10.2",
    "@tabler/icons-react": "^2.40.0",
    "@tanstack/react-query": "^4.20.2",
    "@trpc/client": "^10.9.0",
    "@trpc/next": "^10.9.0",
    "@trpc/server": "^10.9.0",
    "next": "14.1.0",
    "openai": "^4.28.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-query": "^3.39.3",
    "superjson": "^2.2.1",
    "trpc": "^0.8.2",
    "zod": "^3.22.4"
  },

And using TanStack for Reach Query https://tanstack.com/query/v4/docs/framework/react/reference/useMutation

and have also referenced trpc for their useMutation docs https://trpc.io/docs/client/react/useMutation