Request data not consistent between createServerData$ and API route

src
|--auth
|--routes
|  |--(auth)
|  |  |--login.tsx <-- this one has access to the right cookie
|  |-- api
|  |  |--trpc
|  |  |  |--[trpc].ts <-- this one does not have access to the cookie even though login.tsx already has
|--api

const handler = async ({ request, params }: APIEvent) =>
  {
    const cookie = parseCookie(request.headers.get("Cookie") ?? "");
    console.log(cookie); <-- this logs as {}
  };

export const GET = handler;
export const POST = handler;

export const routeData = () => {
  return createServerData$(async (_, event) => {
    const authRequest = auth.handleRequest(event.request);
    const session = await authRequest.validate();
    const cookie = parseCookie(event.request.headers.get("Cookie") ?? "");
    console.log(cookie); <-- This logs out the auth details
  });
};

const Page = () => {
  return (
    <div class="w-full h-screen items-center flex justify-center">
    ...
    </div>
  );
};

export default Page;