I have a project made using React for the frontend and Express for the backend. I want to create a feature to edit data. The data being sent includes a file, so I am using formData() from React. Before sending it, I have checked the contents of formData and they are present. However, after sending it to the backend, the result is undefined. Why is this happening?

this is my code
in Frontend, modal.jsx

const EditModal = ({type, isOpen, setIsOpen, rowId, onEditSuccess }) => {
  const [shipAgentName, setShipAgentName] = useState("");
  const [shipAgentCompany, setShipAgentCompany] = useState("");
  const [arrivalSchedule, setArrivalSchedule] = useState("");
  const [arrivalDestination, setArrivalDestination] = useState("");
  const [departureSchedule, setDepartureSchedule] = useState("");
  const [departureDestination, setDepartureDestination] = useState("");
  const [file, setFile] = useState(null);
  const [filename, setFilename] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          "http://localhost:3001/api/ship/arrival/" + rowId,
          {
            method: "GET",
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        );
        if (response.ok) {
          const data = await response.json();
          setShipAgentName(data.shipAgentName);
          setShipAgentCompany(data.shipAgentCompany);
          if(type === "arv"){
            setArrivalSchedule(data.arrivalSchedule);
            setArrivalDestination(data.arrivalDestination);
          }else{
            setDepartureSchedule(data.departureSchedule);
            setDepartureDestination(data.departureDestination);
          }
          setFilename(data.document);
        } else {
          console.log("Failed to fetch data");
        }
      } catch (err) {
        console.log(err.message);
      }
    };
    fetchData();
  }, [rowId, token]);

 const editRow = async (e) => {
    e.preventDefault();
    const formDataa = new FormData();
    formDataa.append("document", file);
    formDataa.append("ship_agent_name", shipAgentName);
    formDataa.append("ship_agent_company", shipAgentCompany);
    if(type === "arv"){
      formDataa.append("arrival_schedule", arrivalSchedule);
      formDataa.append("arrival_destination", arrivalDestination);    
    }else{
      formDataa.append("departure_schedule", departureSchedule);
      formDataa.append("departure_destination", departureDestination);
    }
    try {
      const response = await fetch(
        "http://localhost:3001/api/ship/arrival/" + rowId,
        {
          method: "PUT",
          body: formDataa,
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );
      if (response.ok) {
        console.log("Data successfully updated");
        onEditSuccess();
      } else {
        console.log("Failed to update data");
      }
    } catch (err) {
      console.log(err.message);
    } finally {
      setIsOpen(false);
    }
  };

 return (
    <div
      id="popup-modal"
      tabIndex="-1"
      className={
        "overflow-y-auto overflow-x-hidden z-50 justify-center items-center flex fixed bg-[rgba(0,0,0,0.2)] transition transform h-screen w-full"
      }
      onClick={(e) => handleClickOutside(e)}
    >
        // ...
         <form
              className="flex justify-center items-center"
              onSubmit={(e) => {editRow(e, rowId)}}
              encType="multipart/form-data">
              <div className="grid gap-[20px]">
                <div>
                  <div className="pl-[17px] font-bold">Agent Name</div>
                  <div className="pt-[11px]">
                    <input
                      type="text"
                      value={ship_agent_name}
                      onChange={(e) => setShipAgentName(e.target.value)}
                      placeholder="Agents Name"
                      className="pl-[17px] bg-[#83B3CA] placeholder-[#5C5C68] w-[594px] h-[45px] rounded-[10px]" />
        // ...
         </form>
};

and in backend. index.js

const app = express();
const corsOptions = {
    origin: 'http://localhost:3000',
    credentials: true, 
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
};

app.use(cookieParser());
app.use(cors(corsOptions));
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/public', express.static(path.join(__dirname, "..", 'public')));
//....
app.put("/api/ship/:type/:id", verifyToken, (req, res) => {
    const id = req.params.id;
    const type = req.params.type;
  
    console.log(req.body.ship_agent_name);

    if(req.body.ship_agent_name === undefined){
        console.log("no data");
        return res.status(500).send({ message: "Error updating data" });
    }
  
    let sqlQuery = "SELECT * FROM departures WHERE id = ?";
    if (type === "arrival") {    
      sqlQuery = "SELECT * FROM arrivals WHERE id = ?";
    }
  
    db.query(sqlQuery, [id], (err, result) => {
      if (err) {
        return res.status(500).send({ message: "Error fetching data" });
      }
      let arrivalSchedule, arrivalDestination, departureSchedule, departureDestination;
      if (result.length > 0) {
        const shipAgentName = req.body.ship_agent_name || result[0].ship_agent_name;
        const shipAgentCompany = req.body.ship_agent_company || result[0].ship_agent_company;
        const document = req.file ? req.file.filename : result[0].document;
  
        if (type === "arrival") {
          arrivalSchedule = req.body.arrival_schedule || result[0].arrival_schedule;
          arrivalDestination = req.body.arrival_destination || result[0].arrival_destination;
        } else {
          departureSchedule = req.body.departure_schedule || result[0].departure_schedule;
          departureDestination = req.body.departure_destination || result[0].departure_destination;
        }
  
        const updateQuery = `
          UPDATE ${type === "arrival" ? "arrivals" : "departures"}
          SET ship_agent_name = ?, ship_agent_company = ?, ${type === "arrival" ? "arrival_schedule" : "departure_schedule"} = ?, ${type === "arrival" ? "arrival_destination" : "departure_destination"} = ?, document = ?
          WHERE id = ?`;
  
        const updateData = [shipAgentName, shipAgentCompany, arrivalSchedule || departureSchedule, arrivalDestination || departureDestination, document, id];
  
        db.query(updateQuery, updateData, (err, result) => {
            if (err) {
                res.status(500).send({ message: "Error updating data" });
            } else {
                res.send({ message: "Data successfully updated" });
            }
        });
      }
    });
});
//...

why console.log(req.body.ship_agent_name) showing undefined