cuando hago clic en el botón Enviar (después de ingresar los valores en la entrada), todo está bien, pero cuando presiono Intro, nuevamente todo está bien, pero el enfoque permanece en la entrada y haga clic en cualquier entrada externa, la entrada de validación funciona y esto es malo. ¿Cómo se puede resolver este problema lógico?

 const InsertTodoForm = () => { const validation = (values) => { const errros = {}; console.log(values); if (!values.name) { errros.name = "name is req"; } else if (values.name.trim().length < 5) { errros.name = "name < 5"; } return errros; }; const dispatch = useDispatch(); return ( <Fragment> <Formik initialValues={{ name: "", complete: false, }} validate={validation} onSubmit={(out, operation) => { dispatch( insertTodo({ ...out, id: Math.floor(Math.random() * 2000) }) ); operation.resetForm(); }} validateOnMount={true} > <Form> <label> name <Field type="text" placeholder="name..." name="name" id="f" /> <ErrorMessage component={"p"} name="name" /> </label> <hr /> <Field type="checkbox" name="complete" /> <hr /> <button type="submit">submit</button> </Form> </Formik> </Fragment> ); }; export default InsertTodoForm;