Uploading Image file to Mongodb creates an empty item. React JS - reactjs

Question

I am currently developing a web app in React JS using a mongodb database to upload data. I am trying to upload image files to the database but the items show up empty. How would I fix this problem?
Backend code for uploading data
const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const multer = require('multer');
const GridFsStorage = require('multer-gridfs-storage');
const url = "mongodb://localhost:27017/StudyAppDB";
const storage = new GridFsStorage({ url });
const upload = multer({ storage });
const app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
mongoose.connect("mongodb://localhost:27017/StudyAppDB", {useNewUrlParser: true, useUnifiedTopology: true});
const imageSchema = {
key: String,
file: {
name: String,
lastModified: Number,
lastModifiedDate: String,
size: Number,
type: String,
webkitRelativePath: String,
},
filename: String,
}
const Images = mongoose.model("Images", imageSchema);
app.post('/uploadfile', upload.single('avatar'), (req, res) => {
const newImages = new Images(
req.body.data
)
newImages.save(function (err) {
if (!err) {
res.send("saved");
} else {
res.send(err);
}
});
})
app.listen(5000, function (req, res) {
console.log("listening");
})
Frontend code for collecting data:
fileUploadHandler is the function that uploads data to the database.
import React, {useState} from 'react';
import './Feed.css';
import axios from 'axios';
const multer = require('multer');
const GridFsStorage = require('multer-gridfs-storage');
const url = "mongodb://localhost:27017/StudyAppDB";
// Create a storage object with a given configuration
const storage = new GridFsStorage({ url });
// Set multer storage engine to the newly created object
const upload = multer({ storage });
export default function PostForm(props) {
const [selectedFile, setSelectedFile] = useState(null)
function fileSelectedHandler(event) {
setSelectedFile(event.target.files[0])
}
function fileUploadHandler(){
// Create an object of formData
const formData = new FormData();
// Update the formData object
formData.append(
"myFile",
selectedFile,
selectedFile.name
);
axios.post("uploadfile", upload.single('avatar'), {data: formData})
.then(function (response) {
//after submitting go to calendar page or whatever
})
.catch(function (error) {
console.log(error);
});
}
return (
<div className="post-form">
<form onSubmit={handleSubmit} style={{width: '99%'}}>
Category:
<div>
<select style={{width: '15%', padding: '0.2%', marginTop: '1%'}} value={category} onChange={(e) => setCategory(e.target.value)}>
{props.categories.map((category, index) =>
<option key={category} value={category}>{category}</option>
)}
</select>
</div>
<br/>
<div style={{textAlign:'center'}}><textarea className='newContentText' value={content} onChange={e => setContent(e.target.value)}/> </div>
<input type="file" onChange={fileSelectedHandler}/>
<button onClick={fileUploadHandler}>Upload</button>
<button className="postButton">Post</button>
</form>
</div>
)
}