Soy nuevo en los formularios React Hook. Estoy usando material UI TextField en mi formulario.

Pude mostrar los mensajes de error cuando escribo en el campo de texto.

Pero una vez que borro el valor dentro del campo de texto y hago clic en otro lugar de la página, el error aún existe. No lo quiero. Solo quiero que se muestren los errores cuando el usuario está escribiendo en el campo de texto (ejemplo: - verificación de expresiones regulares de correo electrónico hasta que se escriba el correo electrónico válido) o el usuario envía un formulario sin valores.

No quiero que se muestren los errores cuando Textfield no está enfocado. ¿Se puede lograr esto mediante formas de gancho de reacción?

 import { useForm, Controller } from "react-hook-form"; function FormTest(props) { const { handleSubmit, control, reset, formState: { isSubmitSuccessful }, } = useForm({ mode: "all" }); const onSubmit = (data) => { console.log(data); }; useEffect(() => { if (isSubmitSuccessful) { reset(); } }, [isSubmitSuccessful, reset]); <form onSubmit={handleSubmit(onSubmit)} noValidate> <Controller name="email" control={control} defaultValue='' render={({ field: { onChange, onBlur, value }, fieldState: { error}, }) => ( <TextField label="Email" variant="standard" type="email" color="warning" value={value} onChange={onChange} onBlur={onBlur} error={!!error} helperText ={!!error ? error?.message : ""} /> )} rules={{ required: "Required!", pattern: { value: emailPattern, message: "Invalid Email Address", }, }} /> <Button type="submit">Submit</Button> </form>

Cuando hago clic en TextField y empiezo a escribir, aparece el error correspondiente. Pero una vez que borro el campo y hago clic en un lugar diferente en la página, el error requerido aún existe. No quiero mostrar el error requerido cuando el campo de texto no está enfocado. Solo si está enfocado y se hace clic en el botón Enviar sin ningún valor.