why getting error while uploading image in react - file-upload

Question

I created a form with name, order, image, status feild in my application. I used material design for form design and used react-material-file-upload for image upload.i got the values and viewed in console.After submitting the form it is not added in my web api,getting error in file.filename not defined in server.
Add.js
import FileUpload from "react-material-file-upload";
import TextField from '#mui/material/TextField';
import Grid from '#mui/material/Grid';
function Addcategory(props){
const [files, setFiles] = useState([]);
const handleSubmit =async (event) =>{
event.preventDefault();
const userid=localStorage.getItem("id");
const fileimg =files[0];
console.log(fileimg);
const userData = {
catname:event.target[0].value,
catorder:event.target[2].value,
image:fileimg,
enable:event.target[4].value,
status:1,
createdBy:userid
}
console.log(userData);
await CategoryDataService.create(userData)
.then(res => {
const data=res.data;
console.log(res);
toast.success("Category Added Successfully");
})
.catch((err) => {
// console.log("err",err.response);
toast.error("please try again!");
});
}
return(
<ThemeProvider theme={theme}>
<div style={{ margin:" 30px 130px 30px"}}>
<Box sx={{ border: '2px solid #15171c', borderRadius: '10px'}} >
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={12} style={{textAlign:"center"}}>
<h2 style={{textAlign:"center"}}>Category Add</h2>
<Box
component="form"
sx={{
'& .MuiTextField-root': { m: 1,},
}}
onSubmit={handleSubmit}
noValidate
autoComplete="off"
>
<div className="form-display">
<Grid >
<TextField
required
id="outlined-text"
label="Category Name"
name="catname"
autoFocus/>
<TextField
id="outlined-text"
label="Category Order"
name="catorder"
type="number"
/>
<TextField
id="outlined-select-currency"
select
label="Category Status"
name="enable"
helperText="Please select actegory status"
>
{catStatus.map((option) => (
<MenuItem key={option.value} value={option.value} >
{option.label}
</MenuItem>
))}
</TextField>
<Grid item xs={12} columnSpacing={{xs:1}}>
<Grid item xs={12}>
<FileUpload value={files} onChange={setFiles} />
</Grid>
</Grid>
<Stack direction="row" spacing={2} justifyContent="center"
style={{margin:"15px"}}>
<Button variant="outlined" type="submit">
Submit {props.children}
</Button >
<Button variant="outlined" onClick={back}>
Cancel
</Button>
</Stack>
</Grid>
</div>
</Box>
</Grid>
</Grid>
</Box>
</div>
</ThemeProvider>
);
}
server.js
const multer=require("multer");
const fileStorageEngine = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "./uploads");
},
filename:(req, file, cb) =>{
cb(null, Date.now() + "-" + file.originalname);
}
});
const upload = multer({ storage: fileStorageEngine });
app.post('/addCategory', upload.single("image"), async(req,res)=>{
// let file = req.file;
const data={
category_order:req.body.catorder,
category_name:req.body.catname,
category_icon:req.file.filename,
category_enable_disable:req.body.enable,
status:req.body.status,
created_by:req.body.createdBy,
createdAt:Date.now()
}
await models.category.create(data).then(result=>{
res.status(201).json({
Code: "1",
Message: "Category created successfully",
Data: result
});
})
.catch(error=>{
res.status(500).json({
Code: "0",
Message: "Something went wrong,try again.",
Post: error
});
})
});
this api is working in postman but not working while submit the form