Trouble setting tRPC with NextJs App Router

 error TypeError: Cannot read properties of undefined (reading 'headers')
    at eval (webpack-internal:///(rsc)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:266:61)

export default function Home() {
  const [input, setInput] = useState('');
  const createBacklogMutation = trpc.createBacklog.useMutation();
  const getBacklogsQuery = trpc.getBacklogs.useQuery({ userId: 1 });

  const backlogs = getBacklogsQuery.data;

  console.log(backlogs);

  const onClick = () => {
    createBacklogMutation.mutate({ url: input, userId: 1 });
  };

  return (
    <div>
      <input type='text' className='border' value={input} onChange={(e) => setInput(e.target.value)}/>
      <button className='border' onClick={onClick}>Click me</button>
    </div>
  );
}

'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import React, { useState } from 'react';
import { trpc } from './client';
import { getBaseUrl } from '../utils';

export function Provider({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [httpBatchLink({ url: `${getBaseUrl()}/api/trpc` })],
    }),
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
}