I'm working on a Next.js project where I need to send form data, including images and a nested object array (itineraries), to my API.

I have the following useState object:

 const [formData, setFormData] = useState({
  images: [],
  title: "",
  locationName: "",
  location: { lat: "", lon: "" },
  description: "",
  price: "",
  offerPrice: "",
  maxCapacity: "",
  duration: "",
  groupSize: "",
  language: ["English"],
  popularFeatures: [],
  included: [],
  excluded: [],
  highlights: "",
  itineraries: [
    { title: "Test", time: "10:00", image: null, description: "Sample", duration: 20 },
  ],
  peopleTypes: ["adult"],
  prices: { adult: "", child: "", infant: "" },
});

im submitting the form using FormData like this

    export const formatFormData = (formData) => {

    const data = new FormData();
  
  data.append("title", formData.title);
  data.append("locationName", formData.locationName);
  data.append("location", JSON.stringify(formData.location));
  data.append("description", formData.description);
  data.append("price", formData.price);
  data.append("offerPrice", formData.offerPrice);
  data.append("maxCapacity", formData.maxCapacity);
  data.append("duration", formData.duration);
  data.append("groupSize", formData.groupSize);
  data.append("language", JSON.stringify(formData.language));
  data.append("popularFeatures", JSON.stringify(formData.popularFeatures));
  data.append("included", JSON.stringify(formData.included));
  data.append("excluded", JSON.stringify(formData.excluded));
  data.append("highlights", formData.highlights);
  data.append("peopleTypes", JSON.stringify(formData.peopleTypes));
  data.append("prices", JSON.stringify(formData.prices));

  data.append("itineraries", JSON.stringify(formData.itineraries));

  // Append main images
  formData.images.forEach((image) => {
    data.append(`images`, image); // Append images (they will be stored as an array)
  });

  // Append images for itineraries
  formData.itineraries.forEach((itinerary, index) => {
    if (itinerary.image) {
      data.append(`itineraries[${index}][image]`, itinerary.image);
    }
  });
      
    return data;
};

and this is the data i get from client to server

title: 'Ab itaque sapiente m',
  description: '<p>Quis excepturi offic.</p>',
  location: '{"lat":34.0522,"lon":-118.2437}',
  locationName: 'Los Angeles',
  price: '688',
  prices: '{"adult":"","child":"","infant":"54"}',
  offerPrice: '309',
  peopleTypes: [ '["infant"]' ],
  duration: '5',
  groupSize: '10-15',
  language: [ '["Italian","English","Albanian","Spanish"]' ],
  maxCapacity: '10',
  popularFeatures: [ '["Relaxing","Swimming"]' ],
  highlight: '<p>Culpa ipsum, veniam.</p>',
  included: [ '["Neque nostrum ipsum"]' ],
  excluded: [ '["Porro in accusamus e"]' ],
  itineraries: [
    '[{"title":"Est ex eum natus vol","time":"17:38","image":{},"description":"Culpa mollitia volup","duration":"30"},{"title":"Quo aliqua Beatae a","image":{},"description":"Quia saepe animi re","duration":"26","time":"07:58"}]'  
  ]
}

but i cant not get the image as object is there any way to pass it as file object or should i sperate it in other field