createTRPCNext config ctx always returns undefined.

MMoronPenguin5/2/2023
Hi Everyone.
So I'm trying to use TRPC and Nextjs for auth and post query etc. I have client side createTRPCNext below.
export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      transformer,
      links: [
        loggerLink({
          enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          headers() {
            if (!ctx || !ctx.req || !ctx.res) {
              return {};
            }
            const cookies = new Cookies(ctx.req, ctx.res);
            const token = cookies.get("jwt");
            return {
              Authorization: token ? `Bearer ${token}` : "",
            };
          },
        }),
      ],
    };
  },
});

when i try to access ctx in config opts it always returns undefined. type says it is NextPageContext | undefined, so i'm guessing i'm missing something. Please let me know if you guys have any ideas.
Also, if you have any idea on using http-proxy with trpc server for cookie assignment etc would be amazing. I been trying to set cookies in proxy server and following this blog's steps https://maxschmitt.me/posts/next-js-http-only-cookie-auth-tokens
With proxy route simple queries works but when i selfHandleResponse and return response, I get TRPCClientError. Thank you for all the help!