Reactjs – Not able to send two String datatype from frontend to backend

I have been trying to send an array of objects to backend from frontend using reactjs, nodejs and MySQL. For some reason, my String data is not going. I am getting a void in the database table. Start Date and End Date are getting visible exactly how I want it to be. Can someone please help me with this issue. Also my very first work experience that I am filling in workExperience array is coming out to be NULL.

The Values that I am using in the function are as follows:

  const [ agencyName, setAgencyName ] = useState("");
  const [ prevRole, setPrevRole ] = useState("");
  const [ startDate, setStartDate ] = useState(null);
  const [ endDate, setEndDate ] = useState(null);
  const [ workExperience, setWorkExperience] = useState([]);

The function that is handling the data flow to backend is as follows:

const handleSubmit = async (e) => {
    e.preventDefault()

    const formattedWorkExperience = workExperience.map((item) => (
      {
        agencyName: item.agencyName,
        prevRole: item.prevRole,
        startDate: item.startDate,
        endDate: item.endDate
      }
    ))
    const newEmployee = {
         firstName, 
         lastName: LastName, 
         DateOfBirth,
         contactNumber,
         roleOption,
         workExperience: formattedWorkExperience,
    }

    try {
      const res = await axios.post("http://localhost:8080/dataentry/newemployee", newEmployee)
      if(res) {
        console.log(res)
      } else {
        console.log("Error found in axios posting method.")
      }
    } catch (error){
      console.log(error)
    }
  }

backend:

//Create a new Employee basic Details
router.post("/newemployee", async (req, res) => {
    const { firstName, lastName, DateOfBirth, contactNumber, roleOption, workExperience } = req.body;

    //Date of birth is formated
    const formattedDateOfBirth = dayjs(DateOfBirth, 'DD-MM-YYYY').format('YYYY-MM-DD');

  // Construct the SQL query
    const query1 = "INSERT INTO `new employee form` (`Id`, `First Name`, `Last Name`, `Date Of Birth`, `Contact Number`, `Role`) VALUES (NULL, ?, ?, ?, ?, ?)"
    db.query(query1, [ firstName, lastName, formattedDateOfBirth, contactNumber, roleOption], (err, result) => {
      if(err) {
          console.log(err)
      }

      const employeeId = result.insertId; // Get the inserted employee ID

> Main Work Experience backend table filling code starts from here

      if(workExperience && Array.isArray(workExperience)) {
        // Construct the SQL query to insert data into `work experience` table
        const query2 = "INSERT INTO `work experience` (`Sl. No.`, `Agency Name`, `Role`, `Start Date`, `End Date`, `Emp_Id`) VALUES ?"

        const workExperienceValues = workExperience.map((exp) => [
          null,
          exp.AgencyName,
          exp.prevRole,
          dayjs(exp.StartDate, 'DD-MM-YYYY').format('YYYY-MM-DD'),
          dayjs(exp.EndDate, 'DD-MM-YYYY').format('YYYY-MM-DD'),
          employeeId
        ]);

        db.query(query2, [workExperienceValues], (err, result) => {
          if (err) {
            console.log(err);
            return res.status(500).send('Error inserting work experience data', workExperienceValues);
          }

          res.status(200).send('Data inserted successfully');
        })
      }
    });
})

I have checked the API using PostMan and I am being able to send the data and everything is getting visible.
Now upon debugging and trial and error I noticed that when i don’t use formattedWorkExperience constant, my Role column gets the data and only Agency Name column remains void. The reason why the above code did not had the item is because i had removed that code.

I tried mapping as well but upon mapping also both my Agency name & Role column gets void data.