Expected behavior I'm trying to post the form data to server by using react-hook-form, but it's data is not going while using MDBInput. If I use Input data will Submit.
Actual behavior it's showing undefind Actual behavior

Resources (screenshots, code snippets etc.) const RegisterForm = () => {

const {register, handleSubmit} = useForm();

  const onSubmit = async (data) => {
    console.log(data);
    const formData = new FormData();
    formData.append("name", data.name);
    // formData.append("pdf", data.pdf[0]);

    const res = await fetch(
      "https://jsonplaceholder.typicode.com/users",
      {
        method: "POST",
        body: formData,
      }
    ).then((res) => res.json());
    alert(JSON.stringify(`${res.message}, status: ${res.status}`));

    console.log(res)
    // e.target.reset();

  };
return (
    <section>
         <MDBValidation onSubmit={handleSubmit(onSubmit)} style={{marginTop:"5%"}}>
            <MDBValidationItem className='col-md-6'>                    
                <MDBInput  label="Enter your name"{...register ("name")}/>                                      
            </MDBValidationItem>
            <MDBBtn>Submit</MDBBtn>
         </MDBValidation> 


    </section>
);

};

export default RegisterForm;