Why is my HTTP-only cookie undefined after page refresh?

Question

I'm setting an HTTP-only cookie to JWT token, then when I'm refreshing the page on frontend. It automatically calls endpoint which has getCheckToken on it. When I try to retrieve that set HTTP-only cookie it returns undefined. This happens when I send the request from my app on localhost:3000, When I use Postman and send a request first on /login and then on /check-token, it works perfectly there, and logs the cookie as it should.

login controller:

exports.postLogin = (req, res) => {
  const { email, password } = req.body;

  User.findOne({ email: email })
    .then((user) => {
      bcrypt
        .compare(password, user.password)
        .then((isMatching) => {
          if (!isMatching)
            return res.status(401).send({ msg: "Incorrect email or password" });

          const token = jwt.sign({ id: user._id }, process.env.TOKEN_SECRET, {
            expiresIn: "1h",
          });

          res.cookie("JWT_TOKEN", token, {
            httpOnly: true,
            maxAge: 1000 * 60 * 60,
          });

          const userData = {
            userName: user.userName
          };

          return res.send({ userData });
        })
        .catch((err) => {
          console.log(err);
          res.status(500).send({ msg: "An error occurred while logging in." });
        });
    })
    .catch((err) => {
      console.error(err);
      res.status(500).send({ msg: "An error occurred while logging in." });
    });
};

checkToken controller:

exports.getCheckToken = async (req, res) => {
  let token = req.cookies["JWT_TOKEN"];
  console.log(token);

  res.send();
}

index.js file:

require("dotenv").config();
const { MONGO_URL, PORT } = process.env;

const cors = require("cors");
const express = require("express");
const mongoose = require("mongoose");
const cookieParser = require("cookie-parser");
const bodyParser = require("body-parser");

const app = express();

const authRoutes = require("./routes/auth");

const corsOptions = {
  origin: "http://localhost:3000",
  credentials: true,
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  allowedHeaders: ["Content-Type", "Authorization"],
};

app.use(cors(corsOptions));

app.use(cookieParser());

app.use(bodyParser.json());

app.use(authRoutes);

mongoose
  .connect(MONGO_URL)
  .then(() =>
    app.listen(PORT, () => console.log(`Server started on port ${PORT}`))
  )
  .catch((e) => console.log(e));

frontend custom hook:

const useCheckToken = () => {
  const updateUserData = useStore((state) => state.updateUserData);
  const { data: userData, isLoading } = useQuery("checkToken", verifyAuthToken);

  useEffect(() => {
    if (userData) {
      updateUserData(userData);
    }
  }, [userData, updateUserData]);

  return { userData, isLoading };
};

verifyAuthToken function:

export const verifyAuthToken = async () => {
  const res = await axios.get(`${apiBase}/check-token`, {
    withCredentials: true,
  });
  return res.data.userData;
};