Uploading image to S3 from typescript react client side but for some reason appending that file to formData adds extra info to the file (which corrupts it and can't be opened after downloading from S3). After removing that extra info from a text editor, the image opens fine. Anyone know why this is happening? I'm using fetch API with FormData

const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {

    const formData = new FormData();
    if (e.target.files) {
      formData.append("file", e.target.files[0]);

      fetch(url, {
        method: "PUT",
        body: formData,
        headers: {
          "Content-Type": e.target.files[0].type,
        },
      })
        .then((response) => {
          console.log(response);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  };

<input
    type="file"
    accept="image/*"
    name="photo"
     onChange={(e) => onFileChange(e)}
  />