React | Formik Async Validatin, cannot read .then of undefined - reactjs

Question

I am using React and Formik to handle my forms. In a component, I have a simple input text. That text is handled for error if being empty by formik. The problem is, I also want to asynchronously handle server validation (if the input.target.value already exist in the database).
Formik provides that functionality, but I am obviously doing something wrong because I get the following error.
Cannot read property .then of undefined
Code Sandbox here: https://codesandbox.io/s/nkm2zyy4z0
So far, I have done the following. According to formik documentation:
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;
}
});
I also tried to create another iteration of the asyncValidation promise, as you see below:
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();
}
});
But still, I get an error:
index.jsx:21 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
Not sure what to do. Name if a property of the values object. If I print on the console, the results, it will print this:
{name: "generalGroup1", description: ""}
description: ""
name: "generalGroup1"
__proto__: Object
Not sure what is wrong here...
Here, formik uses promises to handle this async functionality. I am a little perplex, on what error should be thrown. Maybe I made the mistake here, since I want to basically say. If the value matches something in the database, say that it already exists. If not don't throw any error.
Promises need to throw errors, so what should I do there, and how should I solve my console error.
I am also using a built in service to call the list of items from the API, in order to check against the value being on the input.
export const listItems = () => {
const options = {
method: httpMethod.GET,
url: endpoint.LIST_ITEMS
};
return Instance(options);
};
Below is the part of the component relevant to the input field:
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;
I have followed the formik docs, almost to the teeth, but something is obviously wrong. Can you help a bit. I am relatively new to programming, so if you could explain my mistake it would be great.