this might seem like a trivial question, but I'm truly don't know what is wrong with my code. So, I've made this function that make a FormData, append it with name and value then sends it to the backend api:

const addGroup = () => {
  const token = Cookies.get("X-API-KEY");
  const formData = new FormData();
  formData.append("firstlead", "Is Me");
  formData.append("secondlead", "Is You");
  formData.append("name", "Our Group");
  axios
    .post(
      `http://localhost:7000/api/v1/groups`,formData,
      {
        headers: { authorization: token },
      }
    )
    .then(() => {
      notify();
    });
};

The backend api code is:

// API POST DATA GROUP (admin)
router.post('/',authAdminMiddleware, async (req, res) => {
const {
    firstlead,
    secondlead,
    name
} = req.body;
try {
    console.log(firstlead)
    console.log(secondlead)
    console.log(name)
} catch (error) {
    console.log(error);
    return res.status(500).json({code:500,status:false,message:'Server Error'});
}
})

I don't know why, but the backend console log said that all of my variables (firstlead, secondlead, and name) are undefined despite it's clearly has been assigned a value. I've tried using Postman, and it actually works, so my guess is there is something wrong with my append code on the frontend, but again, I don't know what it is. Any help will be appreciated!

Below is the console.log from the backend, it receive undefined despite the value of firstlead, secondlead, and name has been declared on the addGroup function.

Undefined from backend