Unexpected form submission behavior with React Hook Form and controlled components
I'm working on a project and hit a roadblock. I'm currently building a form using React with React Hook Form (v7) and I'm working with an scenario where the form submits even when validation fails... I've set up my inputs as controlled components and I'm using the `handleSubmit` function correctly. However, it seems like the form submits regardless of whether the fields are valid or not. Here's the relevant code snippet: ```javascript import { useForm } from 'react-hook-form'; const MyForm = () => { const { register, handleSubmit, formState: { errors } } = useForm(); const onSubmit = data => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register('username', { required: true })} placeholder="Username" /> {errors.username && <span>This field is required</span>} <input type="submit" value="Submit" /> </form> ); }; ``` Despite the required validation on the `username` field, I'm finding that clicking the submit button leads to the `onSubmit` function being called with an empty object. This is especially confusing because I can see the validation message displaying correctly. I've double-checked that I'm using the latest version of React Hook Form, and I've also consulted the documentation to make sure I'm implementing everything correctly. To troubleshoot, I added console logs inside the `handleSubmit` function, and, interestingly, it logs an empty object even though the field is marked as required. I'm wondering if this behavior might be due to the way the controlled components are being registered or if there are any known issues with the library that could cause this. Any insights or suggestions on how to resolve this scenario would be greatly appreciated! I'm using Javascript stable in this project. This is happening in both development and production on Windows 10. Could this be a known issue?