я создал Textfield, используя formik и yup в качестве компонента, но данные не обновляются синхронно при обратном вызове из другого компонента

Question

Я создал Textfield, используя formik и yup в качестве компонента, но // данные не обновляются синхронно, так как мы вызываем onChange как // введите описание изображения здесь Обратный вызов другому компоненту
сообщение об ошибке не обновляется синхронно, когда onChange, есть ли // какой-либо способ сделать синхронизацию обновления ошибки ниже, я опубликовал несколько скриншотов консоли и код этой проблемы

, который мы опубликовали, и изображение, котороепоказывает, что данные не обновляются синхронно, сообщения об ошибках, отображаемые в консоли для специального символа, отображаются после ввода следующей буквы

это индексный файл, в котором мы используем этот компонент поля ввода

  const [name, setName] = useState('');
  const [error, setError] = useState('');
<InputField
            type="name"
            placeholder="Enter your name"
            label="Name"
            background="black"
            hover="blue"
            helper="white"
            value={name}
            getError={data => {
              setError(data);
            }}
            onChangeText={text => {
              setName(text);
            }}
          />
this is the formik and yup component

const InputField = props => {
  const { type, placeholder, label, value, defaultValue } = { ...props };
  const handleChange = (event, error) => {
    const data = error === undefined ? '' : error;
    props.onChangeText(event.target.value);
    props.getError(data);
  };
return (
    <Formik
      validateOnBlur
      validateOnChange

      validationSchema={Yup.object().shape({
        name: Yup.string()
          .required(' Name is required')
          .matches(/^[A-Za-z0-9 ]+$/, 'Name cannot contain special 
           characters '),

       password: Yup.string()
          .required('Password is required')
          .min(6, 'Password must be at least 6 characters'),

      })}
    >
<Fragment>
        <FormControl>
        <Field
            validateOnBlur
            validateOnChange
            name={type}
            render={({ field, form }) => {
              return (
                <div>
                  <TextField
                    name={type}
                    type={type}
                    placeholder={placeholder}
                    error={Boolean(form.errors[type] && form.touched[type])}
                    value={value}
                    margin="normal"
                    onChange={event => {
                      field.onChange(event);
                      handleChange(event, form.errors[type]);
                    }}
                    onBlur={event => {
                      field.onBlur(event);
                      props.getError(form.errors[type]);
                    }}
                  />
                  {type && form.errors && form.errors[type] && (
                    <Box color="error.main">{form.errors[type]}</Box>
                  )}
                </div>
              );}}/>
        </FormControl>
      </Fragment>
    </Formik>
  );
};