File upload with react, nodeJS multer doesn't work

Question

i made this function, which takes the file value ( image ) from the file state and send it to upload route, through FormData object

  const [file, setFile] = useState(null);

  const submitPost = async (e) => {
  ...
    e.preventDefault();
    if (file) {
      const data = new FormData();
      const fileName = `${Date.now()}${file.name}`;
      data.append("name", fileName);
      data.append("file", file);
      try {
        await fetch("http://localhost:8000/upload", {
          headers: {
            "Content-type": "application/json",
          },
          method: "POST",
          body: JSON.stringify(data),
        });
        // window.location.reload();
      } catch (err) {
        console.log(err);
      }
    }
  };

the file value in the file state is coming from form file input

        <form className="postOptions" onSubmit={submitPost}>
          <div className="postAreaBot">
            <label htmlFor="file" className="downloadImg">
              <AddAPhotoIcon className="postIcon" />
              <span>Image</span>
            </label>
            <input
              type="file"
              accept=".png,.jpeg,.jpg"
              onChange={(e) => setFile(e.target.files[0])}
              id="file"
              style={{ display: "none" }}
            ></input>
          </div>
          <button type="submit">Post</button>
        </form>

and then sending the file value to this route for upload on folder images inside folder public using multer and path

app.use("/images", express.static(path.join(__dirname, "public/images")));

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, "public/images");
  },
  filename: (req, file, cb) => {
    cb(null, req.body.name);
  },
});
const upload = multer({ storage });
app.post("/upload", upload.single("file"), (req, res) => {
  try {
    return res.status(200).json("File uploaded successfully");
  } catch (err) {
    console.log(err);
  }
});

but the image is not being uploaded

what have i tried

i tested the route using file.originalName for postman instead of file.req.body and the route does indeed works and images are being uploaded successfully, i also checked the values name and file in the data object and it appends it successfully, i can't see what is the problem, why it doesn't upload the image file through the react fetch request?