React returning empty object when sending file

Question

I am trying to send a file to the backend using React but the file always returns undefined when I try to request it from the server, I cannot resolve the issue here is the code :

const [logo, setLogo] = useState();

const handleSubmit = async (e) => {
    e.preventDefault();
    
const formData = new FormData();
formData.append('logo', logo);

 for (var [key, value] of formData.entries()) {
     console.log(key, value);
 }
    try {
        const { data } = await axios.post(
            "/partners",
            {
                formData,
            },
           

        );
        console.log(data)

    } catch (err) {
        console.log(err);
    }
};
<form onSubmit={handleSubmit} method="POST" encType="multipart/form-data">
  <input type="file" name="logo" label="logo" accept=".png" onChange={e => {
     setLogo(e.target.files[0])
  }}/>
</form>

when I change the file and console.log it returns the file but the logo state is empty and axios always send it as an empty object, why is that?