impossible to upload images from multiple forms on multiple pages with multer , express and react

// controller file //
module.exports.createChantier = async (req, res) => {
  const newChantier = new ChantierModel({
    nomDuSite: req.body.nomDuSite,
    client: req.body.client,
    collaborateur: req.body.collaborateur,
    date: req.body.date,
    adresseDuSite: req.body.adresseDuSite,
    proceder: req.body.proceder,
    imageSite:
      req.files !== null
        ? "./uploads/" +
          req.body.nomDuSite.split(" ").join("_") +
          "_" +
          "imageSite" +
          ".jpg"
        : "null",
    suivie: [],
    devis: req.body.devis,
    surfaceCourante: req.body.surfaceCourante,
    surfaceLineaire: req.body.surfaceLineaire,
  });
  try {
    const chantier = await newChantier.save();
    return res.status(201).json(chantier);
  } catch (err) {
    return res.status(400).send(err);
  }
};

// input for forms //

<label htmlFor="imageSite">Photo du site</label>
            <input
              type="file"
              id="imageSite"
              name="imageSite"
              accept=".jpg"
              onChange={(e) => handlePictureImageSite(e)}
            />
            <img src={postImageSite} alt="rapportpic" />

// multer file //

const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "client/public/uploads");
  },
  filename: function (req, file, cb) {
    const fileName =
      req.body.nomDuSite.split(" ").join("_") + "_" + file.fieldname;
    cb(null, fileName + ".jpg");
  },
});

const fileFilter = (req, file, cb) => {
  if (
    file.mimetype == "image/png" ||
    file.mimetype == "image/jpeg" ||
    file.mimetype == "image/jpg"
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

module.exports = multer({
  storage: storage,
  fileFilter: fileFilter,
}).fields([{ name: "imageSite", maxCount: 1 }]);

// controller that does not work //

module.exports.createSuivieChantier = (req, res) => {
  if (!ObjectID.isValid(req.params.id))
    return res.status(400).send("ID unknow : " + req.params.id);

  try {
    return ChantierModel.findByIdAndUpdate(
      req.params.id,
      {
        $push: {
          suivie: {
            suivieId: req.body.suivieId,
            suivieReperage: req.body.suivieReperage,
            commentaireSuivie: req.body.commentaireSuivie,
            suivieSurfaceCourante: req.body.suivieSurfaceCourante,
            suivieSurfaceLineaire: req.body.suivieSurfaceLineaire,
            ////////////////////
            suiviePhoto1:
              req.files !== null
                ? "./uploads/" +
                  req.body.suivieReperage +
                  "_" +
                  "suiviePhoto1" +
                  ".jpg"
                : "",
            suiviePhoto2:
              "./uploads/" +
              req.body.suivieReperage +
              "_" +
              "suiviePhoto2" +
              ".jpg",

            suiviePhoto3:
              "./uploads/" +
              req.body.suivieReperage +
              "_" +
              "suiviePhoto3" +
              ".jpg",

            suiviePhoto4:
              "./uploads/" +
              req.body.suivieReperage +
              "_" +
              "suiviePhoto4" +
              ".jpg",

            /////
          },
        },
      },
      { new: true },
      (err, docs) => {
        if (!err) return res.send(docs);
        else return res.status(400).send(err.message);
      }
    );
  } catch (err) {
    return res.status(400).send(err);
  }
};

// input for forms ///

 <label htmlFor="suiviePhoto1">Photo 1</label>
            <input
              type="file"
              id="suiviePhoto1"
              name="suiviePhoto1"
              accept=".jpg"
              onChange={(e) => handleSuiviePhoto1(e)}
            />
            <img src={PostSuiviePhoto1} alt="rapportpic" />

// multer file //

const multer = require("multer");

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "client/public/uploads");
  },
  filename: function (req, file, cb) {
    const fileName =
      req.body.suivieReperage.split(" ").join("_") + "_" + file.fieldname;
    cb(null, fileName + ".jpg");
  },
});

const fileFilter = (req, file, cb) => {
  if (
    file.mimetype == "image/png" ||
    file.mimetype == "image/jpeg" ||
    file.mimetype == "image/jpg"
  ) {
    cb(null, true);
  } else {
    cb(null, false);
  }
};

module.exports = multer({
  storage: storage,
  fileFilter: fileFilter,
}).fields([
  { name: "suiviePhoto1", maxCount: 1 },
  { name: "suiviePhoto2", maxCount: 1 },
  { name: "suiviePhoto3", maxCount: 1 },
  { name: "suiviePhoto4", maxCount: 1 },
]);

// router file //

const router = require("express").Router();
const chantierController = require("../controllers/chantier.controller");
const uploadChantierFront = require("../config/uploadFile/chantierFront.upload");
const suivieChantierUpload = require("../config/uploadFile/suivieChantier.upload");

router.get("/", chantierController.readAllChantier);
router.get("/:id", chantierController.readChantier);
router.post("/", uploadChantierFront, chantierController.createChantier);
router.put("/:id", chantierController.updateChantier);
router.delete("/:id", chantierController.deleteChantier);

/////////////////// ROUTES SUIVIE CHANTIER
router.patch(
  "/create-suivie/:id",
  suivieChantierUpload,
  chantierController.createSuivieChantier
);
router.patch("/edit-suivie/:id", chantierController.updateSuivieChantier);
router.patch("/delete-suivie/:id", chantierController.deleteSuivieChantier);

module.exports = router;