index.tsx

<AnimatedModal isOpen={isOpen} onClose={onClose}>
  <Formik
    initialValues={InitialValues}
    validationSchema={FormSchema}
    validateOnChange={false}
    onSubmit={(values) => console.log(values)}
  >
    {({ handleSubmit, isSubmitting }) => (
      <Form>
        <ModalHeader>title</ModalHeader>
        <ModalCloseButton isDisabled={isSubmitting} />
        <ModalBody>
          <Field
            component={BasicFormInput}
            name="email"
            title="User Email"
            isDisabled={isSubmitting}
          />
        </ModalBody>

        <ModalFooter>
          <Button mr={3} onClick={onClose} isDisabled={isSubmitting}>
            Cancel
          </Button>
          <Button
            onClick={handleSubmit}
            colorScheme="primary"
            isLoading={isSubmitting}
            isDisabled={isSubmitting}
          >
            Submit
          </Button>
        </ModalFooter>
      </Form>
    )}
  </Formik>
</AnimatedModal>