I have problem submitting a form data using axios. I dont know what i'm doing wrong.I keep get a 400 status from the console and from the browser network, the form can be seen under payload but on the preview tab...it reads "browser sent a req the server could not understand". Here is the code below...

const Form = () => {
 
const [details, setDetails] = useState({
    surname: "",
    phone_number: "",
    passport: null,

  });


const submitForm = async(e) => {
    e.preventDefault()
    completeFormStep();
   

    const formData = new FormData();
    formData.append("surname", details.surname)
    formData.append("passport", details.passport)
    formData.append("phone_number", details.phone_number)
   
   try {
    
      const response = await Axios({
        method: "post",
        url: "https://pshs3.herokuapp.com/sponsored",
        data: formData,
        headers: { 'content-type': 'multipart/form-data' },
      })
      console.log('data', response)
    } catch(error) {
      console.log(error)
    }
  }
 
  

  return (
   <div>
                     <input
                      
                      name="surname"
                      type="text"
                      placeholder="Enter Surname"
                      value={details.surname}
                      onChange={(e) =>
                        setDetails({ ...details, surname: e.target.value })
                      }
                    />
                <input
                      type="text"
                      name="phone_number"
                      placeholder="Enter your phone number"
                      value={details.phone_number}
                      onChange={(e) =>
                        setDetails({ ...details, phone_number: e.target.value })
                      }
                    />
                    <input
                      
                      label="Upload Passport Photograph"
                      name="passport"
                      type="file"
                      accept="image/*"
                     
                      onChange={(e) =>
                        setDetails({ ...details, passport: e.target.files})
                      }
                    />
 
</div>
};

export default Form;



```I 
i've removed a greater part of the input fields for brevity. please I would appreciate any help to resolve the error(Failed to load resource: the server responded with a status of 400 (BAD REQUEST)).