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

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?