React - httpOnly cookies not getting set from the express server

Question

Vite + React: http://localhost:5173

Express: http://localhost:3000

Here is the code in the express server's login route:

const mycookie = cookie.serialize("jwt", refreshToken, {
    httpOnly: true, // Set the HTTP-only flag
    secure: true, // Set the secure flag
    sameSite: "none", 
    path: "/", // Set the path of the cookie to '/'
    maxAge: 3600, // Set the maximum age of the cookie to 1 hour
  });

  // Set the cookie in the response headers
  res.setHeader("Set-Cookie", mycookie);

  res.json({
    accessToken,
    refreshToken,
  });

Here is my cors config:

const allowedOrigins = require("./allowedOrigins");

const corsOptions = {
  crendials: true,
  origin: function (origin, callback) {
    console.log(allowedOrigins.indexOf(origin));
    if (allowedOrigins.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(new Error("Not allowed by CORS"));
    }
  },
};

Here is my handleSubmit function in the frontend (gets called when the user clicks submit):

const handleSubmit = () => {
    console.log("Login");
    // axios.defaults.withCredentials = true;

    axios.post("http://localhost:3000/api/v1/auth/login", { email, password });
  };

Whenever the request is made to the server. The response header does contain the set-Header to set the jwt token but I am not able to see it in my applications tab under cookies in devtools. A pre-flight request also comes in which probably clears the cookie.

My networks tab:

The xhr request:

The OPTIONS request:

The Applications tab:

However, when I disable CORS in the browser, the cookie is getting set.

Networks tab (NOTICE: No PreFlight request)

Applications tab:

I tried working out different answers from stackoverflow answers like this, this, this, and many more along with a reddit post on a similar issue but nothing has worked.

P.S. : I already tried using credentials: true