Not getting image file in nodejs after posting from react

Question

I'm sending the image file from react to nodejs. I used the SetImage function where the image file selected by the user is set to the 'myimage' state variable and from handleSubmit I'm posting the images to the '/blog/posts' endpoint using Axios. the image file is getting loaded on the 'myimage' state variable but as I posted using the Axios, I can't see all the data of the image file and giving me the empty object.

This is my React code:-

import React, { useState, useRef } from "react";
import './postblog.css';
import axios from '../axios';

const PostBlog = () => {
    const [myimage,setImage] = useState("");
    const handleSubmit = (event) => {
        event.preventDefault();
        axios.post('/blog/posts', {
            image:myimage
        }).then((res) => {
            console.log(res.body);
            console.log('successfully posted');
        });        
    }
    const SetImage = (e)=>{
        console.log(e.target.files[0]);
        setImage(e.target.files[0]);
        console.log(myimage);
    }
    return (
        <div className="postblog">
            <form onSubmit={handleSubmit} enctype="multipart/form-data">
                <input type="file" placeholder="Choose your file" onChange={(e)=>{SetImage(e)}} name="myImage"/>
               </div>
                <button type="submit">Post</button>
            </form>
        </div>
    );
}
export default PostBlog;

This is my Nodejs code:-

var storage = multer.diskStorage({
    destination: function(req, res, cb) {
        cb(null, './Routers/blog/uploads');
    },
    filename: function(req, file, cb) {
        cb(null, Date.now() + file.originalname);
    }
});

var upload = multer({
    storage: storage,
    limits: {
        fieldsize: 1024 * 1024 * 3
    }
});


blog.post('/posts', upload.single('myimage'), (req, res, next) => {
    console.log(req.body);
    console.log(details);
})

The output in the console I'm getting is an empty object