Validate form field by onChange immediately, not after additional manipulations - reactjs

Question

I have a simple form field with formik & yup validation.
The form is submitted by changing the form field. The field is of type text, but only numbers must be entered.
In this case, if a number exceeding 10 is entered, an error should be displayed and the form should be banned.
The problem is that the field only works after the blur.
If I enter one character (onChange) - field is not valid and "Required". Only after blur or type second symbol - valid.
const schema = yup.object().shape({
name: yup
.string()
.trim()
.required('Required')
.test('amount', 'Test errror', (val) => {
console.log('S1>>>' + val);
return parseFloat(val) <= 10;
}),
});
const handleSubmit = useCallback(async (values) => {
try {
console.log('Success');
} catch (e) {
console.log('Unhandled login error :', e);
}
}, []);
<Formik
validateOnChange
initialValues={{ name: '' }}
validationSchema={schema}
onSubmit={handleSubmit}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
}) => (
<Form className="form" onChange={handleSubmit}>
<div className="mb-4">
<Form.Group className="position-relative">
<div className="position-relative">
<Form.Control
type="text"
name="name"
className={`${touched.name ? 'is-touch ' : ''} ${
errors.name && touched.name ? ' is-invalid' : ''
} ${!errors.name && touched.name ? ' is-valid' : ''}`}
value={values.name.replace(/\D/g, '')}
onBlur={handleBlur}
onChange={handleChange}
placeholder="Name"
touched={touched.name}
/>
</div>
{errors.name && (
<Form.Control.Feedback type="invalid" className="d-block">
{errors.name}
</Form.Control.Feedback>
)}
</Form.Group>
</div>
</Form>
)}
</Formik>
So, How to validate a form field already from the first character and without blur (only onChange) and if I type (without blur) > 10 - show error?
Show error immediately, not after additional manipulations.

Answer 1

In the documentation, there are some props for these kind of manipulations.You can check setFieldTouched or validateField prop on this page:
https://formik.org/docs/api/formik