example-formik-form.jsx

export function ExampleForm() {
  const [intitialValue, setIntitalValue] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setIntitalValue({
        email: 'This is my async email',
      });
    }, 3000);
  }, []);

  if (intitialValue === null) {
    return null;
  }

  return (
    <Formik
      validateOnChange={false}
      initialValues={intitialValue}
      validate={(values) => {
        const errors = {};
        if (!values.email) {
          errors.email = 'Enter email address';
        } else if (values.email.indexOf('@') === -1) {
          errors.email = 'Invalid email address';
        }
        return errors;
      }}
      onSubmit={(values, actions) => {
        actions.setSubmitting(false);
      }}>
      <BaseFormikField
        name="email"
        id="email"
        labelText="Email"
        placeholder="Email"
        renderField={TextInput}
      />
    </Formik>
  );
}