How to control whether form page was filled correctly in `react-hook-form`

Question

I'm using react-hook-form for form building in next js app. I want to disable move to the next step button until user fill the form correctly. I did the following:

       disabled = !form.formState.errors.email &&
        !form.formState.errors.username &&
        !form.formState.errors.password &&
        !form.formState.errors.confirmPassword &&
        !form.formState.errors.terms,

But once the page is visited, the form is empty and hence the errors are null so button is not disabled. I could validate the form before user type anything but then he will get plenty of errors before it start typing which is not a good user experience. What could I do?