تعديل بيانات تحتوي صورة

السلام عليكم.

أواجه مشكل في إرسال بيانات تحتوي صورة بعد تعديلها إلى الخادم.

الكود في طرف العميل

/**
   * Update Image Informations
   */
  const [image, setImage] = useState(imageSrc)
  const [imagePhoto, setImagePhoto] = useState(null)
  const [title, setTitle] = useState("")
  const [description, setDescription] = useState("")
  // console.log(imagePhoto?.name)
  useEffect(() => {
    if (current_photo) {
      setTitle(current_photo?.title || "");
      setDescription(current_photo?.description || "");
      setImage(imageSrc || "");
    }
  }, [current_photo, imageSrc]);

  // Handle Change Photo 
  const handleFileChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setImage(URL.createObjectURL(e.target.files[0]));
      setImagePhoto(e.target.files[0]);
    }
  };
  const updateImg = (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("title", title);
    formData.append("description", description);
    if (imagePhoto) {
      formData.append("photo", imagePhoto, imagePhoto?.name);
    }
    // formData.append("photo", imagePhoto)
    axios
      .post(`/api/images/user_images/${current_photo?._id}`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          "x-auth-token": user.data?.token,
        },
      })
      .then((res) => {
        console.log(res.data);
        navigate("/");
      })
      .catch((error) => console.error(error));
  };

في طرف الخادم

// router
router.post("/user_images/:photoId", [upload.single('photo'), protect], editImg);

// controller
const editImg = async (req, res) => {
  try {
    const post = await Image.findById(req.params.photoId)

    post.title = req.file.title
    post.description = req.file.description
    post.photo = req.file ? req.file.filename : post.photo;
    
    const updatedPost = await post.save()
    res.status(200).json(updatedPost);
  } catch (error) {
    res.status(500).send("Server error" + error.message);
  }
};

شكرا على المساعدة.