Cookie is in /api route but not in 'localhost:3000' or '/' - cookies

Question

I am working on the login system but have been stuck for a while, cookies are in the response header but not set in the application tab.
Edit: looks like cookie is being stored to path '/api'. But after setting path:'/' nothing changed.
/api/login.js
export default async (req, res) => {
if (req.method === "GET") res.send(200);
else if (req.method === "POST") {
// console.log(req.body);
const user = await loginHandler(req);
const matchPassword = await bcrypt.compare(
req.body.password,
user[0].Password
);
if (!matchPassword) {
res.send(400);
} else {
const token = jwt.sign(
{
Email: user[0].Email,
},
process.env.SECRET,
{ expiresIn: "12h" }
);
res.setHeader(
"Set-Cookie",
cookie.serialize(token, {
httpOnly: true,
maxAge: 12 * 3600 * 1000,
secure: process.env.NODE_ENV !== "development",
sameSite: "strict",
path:"/",
})
);
res.send(200);
}
}
};
login form
const headers = {
"Content-Type": "application/json",
};
const handleSubmitForm = async (enteredEmailAndPassword) => {
const user = {
...enteredEmailAndPassword,
};
await axios.post(
"/api/login",
user,
{
headers: headers,
},
{ withCredentials: true }
);
};
response header
Set-Cookie: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJFbWFpbCI6InZmdkBnbWFpbC5jb20iLCJpYXQiOjE2NTI1OTMzMzgsImV4cCI6MTY1MjYzNjUzOH0.Wsl25NglaidYnzpIrPxK6FS5nAXjUe1tK7DQQ-KVuUE=%5Bobject%20Object%5D
ETag: "3-n5rwKVhboBTgfNORDKl2z1YWBhY"
Content-Type: application/json; charset=utf-8
Content-Length: 3
Vary: Accept-Encoding
Date: Sun, 15 May 2022 05:42:18 GMT
Connection: keep-alive
Keep-Alive: timeout=5
What should I do to set cookies in the application tab?