Cookies are not being set in production

I deployed an express server to heroku as well as a next.js app. The cookies are being sent from the server and even being shown in the network tab:

However, the cookies are not actually stored, all my requests failed because they depends on the csrf cookie, and the storage tab is empty:

This is the code for setting the cookies in the backend:

const csrfProtection = csrf({
  cookie: {
    httpOnly: true,
    sameSite: 'none',
    secure: true,
  },
});

app.set('trust proxy', 1);

app.use(cors({ credentials: true, origin: clientOrigin }));

app.get('/', csrfProtection, function (req: Request, res: Response) {
  res.cookie('XSRF-TOKEN', req.csrfToken(), { sameSite: 'none', secure: true });
  res.end();
});

app.use(csrfProtection);

this is my axios instance:

const baseURL = process.env.baseURL;

const axiosInstance = Axios.create({
  baseURL,
  withCredentials: true,
});

and the request code:

 useEffect(() => {
    dispatch(loadingAction.setToTrue());
    const getCsrf = async () => {
      await axiosInstance.get('/');
    };
    getCsrf()
      .then(() => {
        dispatch(loadingAction.setToFalse());
      })
      .catch((err) => {
        dispatch(loadingAction.setToFalse());
        setError(err);
      });
  }, []);