react not show me images in front end I am using multer in express js but un able watch my images in front end

Frontend

const uploadImageHandler = async (e) => {
const file = e.target.files[0]
console.log(file,"file")
const formData = new FormData()

formData.append('image', file)
console.log(formData,"formDataFile")
try {

const config = {
header: { 'content-type': 'multipart/form-data' }
}
const { data } = await axios.post('http://localhost:8000/api/upload', formData, config)
setImage(data)
console.log(data.name, "axios image")
} catch (error) {
console.log(error)

}
}

backend

onst router = express.Router();
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, './upload')

},
filename: (req, file, cb) => {
cb(null, `${Date.now()}-${(file.originalname)}`)
}

})
function checkFileType(file,cb){
const fileType=/jpg|jpeg|png/
const extname=fileType.test(path.extname(file.originalname).toLowerCase())
console.log(extname ,"extname")
const mimetype=fileType.test(file.mimetype)
if (extname&&mimetype){
return cb(null, true)

}else{
cd('image only !')
}

}
const upload=multer({
storage,
fileFilter:function(req,file, cb){
checkFileType(file,cb)

}

})
router.post('/',upload.single('image'),(req,res)=>{
// console.log(req.file.path)
const url = req.protocol + '://' + req.get('host')
// console.log(+req.file.path);
res.send(`/${req.file.path}`)
})

router.post('/multiupload',upload.array('image', 3),(req,res)=>{
console.log(req.files)
res.send(req.files.path)
})

export default router;

app.use('/upload',express.static(__dirname+'/upload'));

Review the frontend uploadImageHandler and backend upload router, including the express.static mount, then reproduce the upload request and inspect the returned path and browser request. Done means an uploaded image is reachable by the frontend and renders after the response is stored.

Written by the indexing model from the issue text.