when i click submit butten(After entering the values ​​in the input ) , every things is ok, but when press enter , again every things is ok but focus remain on input and click any where out side input , validation input work and this is bad. how can solve this logical problem?

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;