Cookie not getting saved in browser but works fine with postman

ok so everything was working fine when the backend and the front end where hosted in Localhost

but when i deployed the backend to (Heroku) and the frontend to (Vercel) both HTTPS and set the cookie to sameSite="NONE" secure, the browser does not set the cookie anymore, but postman works just fine, i tried to many CORS options nothing works

// both backend and frontend have Credentials included //

here's the backend express CORS config

///////////// Express cors config ///////////
app.use(
    cors({
        origin: true,
        credentials: true,
        exposedHeaders: ['Set-Cookie'],
        allowedHeaders: [
            'Authorization',
            'Content-Type',
            'membership-id',
            'account-id',
            'X-Requested-With',
            'Accept',
            'Origin',
        ],
    }),
);

cookie

const token = jwt.sign({userID: user._id}, process.env.JWT_SECRET, {
    expiresIn: 900,
});
res.setHeader(
    'Set-Cookie', cookie.serialize('token', token, {
        httpOnly: true,
        sameSite: 'none',
        secure: true,
        maxAge: 900,
        path: '/',
    }),
);

and frontend with axios

const API = axios.create({
    baseURL: 'https://apiplalapalpl.com',
    withCredentials: true,
  });

const res = await API.post('/api/user/login', { email, password });

here's some pictures from chrome

https://i.imgur.com/4Mh2l46.png , https://i.imgur.com/USgT2ay.png

please help, i'm about to pull my HAIR out :(