On the client side I am just using react-drag-drop-files component

Client:

import { FileUploader } from "react-drag-drop-files";
import React, { useState } from "react";

const fileTypes = ["JPG", "PNG"];


export default function DragDrop() {

    const handleChange = (file) => {
        console.log(file)
        fetch("http://localhost:4000/api/upload", {
            method: "POST",
            body: file,
            headers: {
            "Content-Type": "image",
            },
        })
    };

    return (
        <FileUploader handleChange={handleChange} name="file" types={fileTypes} />
    );
}

And on the server side I am receiving it like so:

app.post("/api/upload", async (req, res) => {
    try {
        console.log("Image", req.body, req.files)
    } catch (err) {
        console.error(err);
    }
});

I clearly see the img file being console.logged on the client side, but on the server side the console.log is empty or undefined. Why?