Undefined For image upload in React Typescript, Backend -Express Multer

Question

I am able to upload image using Postman in DB and in the destination folder but when I am trying to upload it via frontend(React Typescript) it shows undefined for the image. Can anyone have a look at it and let me know what I am doing wrong. I am stuck at this for hours.

React Typescript Code

function ImageUpload() {
    const [images, setImages] = useState<File>();
    const handleInput = (event: ChangeEvent<HTMLInputElement>) => {
        // setImages(event.target.files[0])
        const fileList = event.target.files;

        // approach 1
        if (!fileList) return;
        else {
            console.log(fileList[0].type)
            setImages(fileList[0]);
        }

    }

    const handleSubmit = (event: FormEvent) => {
        event.preventDefault()
        console.log("Before axios")
        console.log(images)
        const config = {
            headers: {
                "content-Type": "multipart/form-data"
            }
        };
        //approach 1
        Axios.post("http://localhost:3003/imageInsert", images).then(() => {
            alert("Image Inserted 1")
        }).catch(error => {
            console.log(error.response)
        })
    }

    return (
        <>
            <div>
                <form onSubmit={handleSubmit} encType="multipart/form-data">
                    <div>
                        <label>Image </label><br /><br />
                        <input type="file" name='image' accept='image/*' onChange={handleInput} />
                    </div>
                    <br />
                    <button type='submit'>Submit</button>
                </form>
            </div>
        </>
    )
}
export default ImageUpload

Express Code

const express = require('express')
const app = express()
const mysql = require('mysql2')
const bodyParser = require('body-parser')
const cors = require('cors')
const path = require('path')

const multer = require('multer')


const db = mysql.createPool({
    host: 'localhost',
    user: 'xyz',
    password: 'xyz',
    database: 'demo',
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0
})


app.use(cors())
app.use(express.json())


const fileStorageEngine = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, "images");
    },
    filename: (req, file, cb) => {
        console.log(file)
        cb(null, Date.now() + "--" + file.originalname);
    },
})

const upload = multer({ storage: fileStorageEngine })

app.post("/imageInsert", upload.single('image'), (req, res) => {

    console.log(req.file) // shows undefined here
    const filename = req.file.filename
    const query = `insert into image (img) values ('${filename}')`;
    db.query(query, (error, result) => {
        res.send("Image Inserted in DB" + Date.now())
        console.log("Image Inserted")
    })
})

app.listen(3003, () => {
    console.log("running on port 3003")
});