Form (type=file) stacks previous form submissions

I am writing a program that uploads photos to a cloud and then uses the url from the cloud to display the photos.
My problem is that during the fetch POST request on the form, if I submit a photo it’s fine but if I submit again it shows the photo from the previous submit too (doubling the image on the page). However it does not actually re upload the photo to the cloud, just displays it twice.

Here is the fetch request.

//function for uploading photos
const uploadPhoto = (thePhotos) => {
  console.log("uploadPhoto started...")
  const photos = document.getElementById("photoContainer");

  const today = new Date();
  const month = today.getUTCMonth() + 1;
  const day = today.getUTCDate();
  const year = today.getUTCFullYear();
  const d = document.createElement("div");
  d.innerHTML = month + "/" + day + "/" + year;

  thePhotos.forEach((image) => {
    const imgBox = document.createElement("div");
    imgBox.className = "newphoto";
    photos.insertBefore(imgBox, photos.children[0]);
    const img = document.createElement("img");
    img.src = "cloud-link-url" + image.link;
    imgBox.appendChild(img);
    if (image.link == thePhotos[0].link) {
      imgBox.appendChild(d);
    }
    if (image.imageMediaMetadata.time) {
      const popupid = document.createElement("div");
      popupid.className = "photo-overlay";
      popupid.setAttribute(
        "data-id",
        "This was taken on " + image.imageMediaMetadata.time
      );
      imgBox.appendChild(popupid);
    }
  });
};





//On uploading a new photo
form.onsubmit = async (event) => {
  event.preventDefault();
  let unique = Date.now();
  const formData = new FormData(form);
  loadingIcon.style.display = "block";

  fetch(`/upload?unique=${unique}`, {
    method: "POST",
    body: formData,
    headers: {
      "Cache-Control": "no-cache", //no cache did not stop the duplication
    },
  })
    .then((response) => {
      if (!response.ok) {
        const reserr = document.getElementById("error");
        reserr.innerHTML =
          "Bad network connection. Please refresh and try again.";
        reserr.style.display = "block";
        throw new Error("Bad network connection (onsubmit)");
      }
      console.log("Response OK");

      return response.json();
    })
    .then((data) => {
      console.log("data", data); //2nd+ time array grows with each addition.
      loadingIcon.style.display = "none";
      //Tried to use a function here instead to see if the duplication would stop.
      uploadPhoto(data);
      form.reset();
    })
    .catch((error) => {
      console.log(error);
    });

Because the duplication is not actually a double upload I think the problem lies here. I debugged the server side code and it is fine and working.
The data variable in the console logs show that on the second+ time uploading the array grows.

I tried stopping it from caching and clearing data variable but no go. I tried finding a way to clear the input fields but no go. I also looked into server side but highly doubt it is there.