createTRPCNext config ctx always returns undefined.

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 {
      links: [
          enabled: (opts) => process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
          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
With proxy route simple queries works but when i selfHandleResponse and return response, I get TRPCClientError. Thank you for all the help!