hunk.code_window:           ? React.Children.only(children)
             : null
           : null}
       </FormikProvider>
     );
   }) as <
     Values extends FormikValues = FormikValues,
     ExtraProps = {}
   >(props: FormikConfig<Values> & ExtraProps & React.RefAttributes<FormikContextType<Values>>) => JSX.Element;
   function warnAboutMissingIdentifier({
     htmlContent,
     documentationAnchorLink,
     handlerName,
  
hunk.labels: keep keep keep keep keep replace replace replace replace keep keep keep keep keep
hunk.after_edit: }
  
hunk.file_path: packages/formik/src/Formik.tsx
hunk.type: replace
file: import React from 'react';
  import { Formik, Field, Form, ErrorMessage } from 'formik';
  import { Debug } from './Debug';
  
  // Async Validation
  const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
  
  const validate = (values) => {
    return sleep(300).then(() => {
      const errors = {};
  
      if (['admin', 'null', 'god'].includes(values.username)) {
        errors.username = 'Nice try';
      }
  
      if (!values.username) {
        errors.username = 'Required';
      }
  
      if (Object.keys(errors).length) {
        throw errors;
      }
    });
  };
  
  const Username = () => (
    <div>
      <h1>Pick a username</h1>
      <Formik
        initialValues={{
          username: '',
        }}
        validate={validate}
        onSubmit={values => {
          sleep(500).then(() => {
            alert(JSON.stringify(values, null, 2));
          });
        }}
        render={({ errors, touched }) => (
          <Form>
            <label htmlFor="username">Username</label>
            <Field name="username" type="text" />
            <ErrorMessage name="username" />
            <button type="submit">Submit</button>
            <Debug />
          </Form>
        )}
      />
    </div>
  );
  
  export default Username;
  