NextJS cookies are set on localhost but not on production

I'm trying to set an encrypted cookie, so that I can use it later to mitigate CSRF attacks. I'm using Cookies module to set the cookie.

It is working fine on localhost and the cookie 'xcsrf' is created. But on production, it's not being created.

import Cookies from 'cookies';
import { NextPage, GetServerSideProps } from 'next';
import { encryptWithAES } from '@utils/tokenEncryption';
import { wrapper } from 'store';


const LoginPage: NextPage = () => <div> Login page </div>


export const getServerSideProps: GetServerSideProps = wrapper.getServerSideProps(
  async (ctx) => {
    const { store, req, res } = ctx;
    const props = await getPageProps(store);
    const cookies = new Cookies(req, res);
    const token = `${Date.now()}`; // I know this is not the best way. I'm just testing
    const encrypted = encryptWithAES(token);
    cookies.set('xcsrf',encrypted, {
      httpOnly: true,
    });
    return {
      props: {...props },
    };
  },
);

utils/tokenEncryption

import CryptoJS from 'crypto-js';

export const encryptWithAES = (text: string | CryptoJS.lib.WordArray) => {
    const passphrase = process.env.CSRF_SECRET as string;
    return CryptoJS.AES.encrypt(text, passphrase).toString();
  };

I have checked other questions on StackOverflow but I couldn't find a solution.