Formik with Yup validation: Async validation not reflecting in UI state
I've looked through the documentation and I'm still confused about I'm using Formik with Yup for form validation in a React application, and I'm facing an issue where the async validation for a username field is not updating the form state correctly... The async validation checks if the username is already taken by making an API call to my backend. While it works correctly in the background, the validation error message does not appear in the UI until after the user interacts with another field. Here’s a snippet of my form setup: ```javascript import React from 'react'; import { Formik, Form, Field, ErrorMessage } from 'formik'; import * as Yup from 'yup'; const AsyncValidationForm = () => { const validateUsername = async (value) => { const response = await fetch(`/api/check-username?username=${value}`); const data = await response.json(); if (data.exists) { return 'Username already taken'; } }; const validationSchema = Yup.object({ username: Yup.string() .required('Required') .test('check-username', 'Username already taken', validateUsername) }); return ( <Formik initialValues={{ username: '' }} validationSchema={validationSchema} onSubmit={(values) => { console.log(values); }} > {({ isSubmitting }) => ( <Form> <label htmlFor="username">Username</label> <Field name="username" /> <ErrorMessage name="username" component="div" /> <button type="submit" disabled={isSubmitting}>Submit</button> </Form> )} </Formik> ); }; export default AsyncValidationForm; ``` I’ve tried calling `setFieldError` manually in the `validateUsername` function, but it seems to be inconsistent. Sometimes the error shows up immediately, but often it only triggers after I click away from the field. I expect the validation to show the error as soon as the API call finishes, regardless of focus state. Is there a recommended way to ensure that the error message is displayed immediately on async validation, while still maintaining good user experience? Any insights would be appreciated! This is part of a larger application I'm building. What am I doing wrong?