I’m using react-hook-form and zod. Though I’m able to achieve the desired behavior, I want to know if there is any better way of doing it.

This is my current code snippet of the form.

const RegistrationForm = () => {
const {
   register,
   handleSubmit,
   formState: { errors, isSubmitting, isDirty },
   control,
} = useForm<RegistrationFormInput>({
   resolver: zodResolver(registrationSchema),
   defaultValues: {
     name: '',
     email: '',
   },
});

const { dirtyFields } = useFormState({ control });

const isFormFilled = dirtyFields.name && dirtyFields.email;
 return( .....
  <Button type="submit" disabled={!isFormFilled || isSubmitting}>
    Submit
  </Button>
</form>
);

export default RegistrationForm;