Реагировать | Formik Async Validatin, не может прочитать .по неопределенному

Question

Я использую React и Formik для обработки моих форм. В компоненте у меня есть простой input текст. Этот текст обрабатывается для ошибки, если он пуст с помощью formik. Проблема в том, что я также хочу асинхронно обрабатывать проверку сервера (если input.target.value уже существует в базе данных).

Formik предоставляет эту функциональность, но я, очевидно, что-то делаю не так, потому что я получаю следующую ошибку.

Невозможно прочитать свойство .then of undefined

Код Песочница здесь: https://codesandbox.io/s/nkm2zyy4z0

Пока что я сделал следующее. Согласно документации formik:

    const asyncValidation = values =>
      listItems.then(data => {
        const errors ={};
        if (data.includes(values.name)) {
          errors.name = 'Username already exist';
        }
        if (!data.include(values.name) {
          throw errors;
        }
      });

Я также попытался создать еще одну итерацию обещания asyncValidation, как показано ниже:

const asyncValidation = values =>
  new Promise((resolve, reject) => {
    const errors = {};
    if (listGroups.includes(values.name)) {
      console.log(errors)
      errors.email = 'Required';
    }

    if (!listGroups.includes(values.name)) {
      console.log(errors)
      reject(errors);
    } else {
      resolve();
    }
  });

Но все равно я получаю сообщение об ошибке:

index.jsx: 21 Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'name' из неопределенного

Не уверен, что делать. Имя, если свойство объекта значений. Если я распечатаю на консоли результаты, то будет напечатано это:

{name: "generalGroup1", description: ""}
description: ""
name: "generalGroup1"
__proto__: Object

Не уверен, что здесь не так ...

Здесь formik использует обещания для обработки этой асинхронной функциональности. Я немного озадачен тем, на какую ошибку надо скинуть. Может быть, я ошибся здесь, так как хочу сказать в принципе. If the value matches something in the database, say that it already exists. If not don't throw any error.

Обещания должны выдавать ошибки, так что я должен делать там, и как я должен решить мою консольную ошибку.

Я также использую встроенный сервис для вызова списка элементов из API, чтобы проверить значение на входе.

export const listItems = () => {
  const options = {
    method: httpMethod.GET,
    url: endpoint.LIST_ITEMS
  };
  return Instance(options);
};

Ниже приведена часть компонента, относящаяся к полю ввода:

class ItemDetailsForm extends React.Component {
  static propTypes = {
    ...formPropTypes,
    data: PropTypes.object
  };

  handleSubmit = values => {
    const { id, onSubmit } = this.props;
    onSubmit(id, values);
    asyncValidation();
  };

  render() {
    const { data } = this.props;

    return (
      <Formik
        initialValues={{ ...data }}
        onSubmit={this.handleSubmit}
        validationSchema={validationSchema}
        render={({ values, touched, errors, handleChange, handleBlur, handleSubmit }) => (
          <form onSubmit={handleSubmit}>
            <div className="row">
              <div className="col-md-3">
                <div className="form-group">
                  <label htmlFor="itemName">
                    Item name <span className="text-danger">*</span>
                  </label>
                  <input
                    type="text"
                    onChange={handleChange}
                    onBlur={handleBlur}
                    value={values.name}
                    name="name"
                    className={classNames('form-control', {
                      'is-invalid': errors.name && touched.name
                    })}
                    id="itemsName"
                    placeholder="Some Item"
                  />
                  {!!errors.name && touched.name && (
                    <div className="text-danger">{errors.name}</div>
                  )}
                </div>
                <button className="btn btn-primary" type="submit">
                  Submit
                </button>
              </div>
            </div>
          </form>
        )}
      />
    );
  }
}

export default ItemDetailsForm;

Я следовал документам по формированию почти до зубов, но что-то явно не так. Можете ли вы помочь немного. Я относительно новичок в программировании, поэтому, если бы вы могли объяснить мою ошибку, было бы здорово.