I am trying to send files using react js to express the server. but when I send a file from the frontend I got a null value into the server.

Frontend: I have consol log into the frontend everything is ok into the frontend.

const ProductImport = function () {
    const [file, setFile] = useState<any>();
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [fileName, setFileName] = useState("");

    const saveFile = (e) => {
        setFile(e.target.files[0]);
        setFileName(e.target.files[0].name);
    };
    const uploadFile = async (e: any) => {
        e.preventDefault()
        const formData = new FormData();
        formData.append("file", file);
        formData.append("fileName", fileName);

        console.log(file);
        console.log(fileName);

        fetch('http://localhost:5000/upload-excel', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.insertedId) {
                    alert('excel Added')
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });

    };
    return (
        <form onSubmit={uploadFile}>
            <label htmlFor="formGroupExampleInput" className="form-label">Example label</label>
            <input type="file" onChange={saveFile} />
            <button type="submit">Upload</button>
        </form>
    )
}

Backend: The problem is with the backend, I got null

//MIddleware
app.use(cors())
app.use(express.json())
app.use(cors());
app.use(fileupload());
app.use(express.static("files"));
app.use(bodyParser.json({ limit: "50mb" }));
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true, parameterLimit: 50000 }));

     app.post("/upload-excel", async (req, res) => {
            const file = req.files;
            console.log(file);
        });

Frontend console:

Backend console: