Динамическая форма с React + Formik + Yup

Question

Мне нужно уметь обрабатывать эту форму с помощью formik + yup.

Пользователь должен иметь возможность динамически изменять поля ввода в зависимости от того, решат ли они зарегистрироваться с помощью кредитной карты или банковского счета. Кредитная карта отображает поля на изображении, банковский счет показывает поля, относящиеся к добавлению банковского счета.

Поля адреса выставления счета должны быть инициализированы полями, заполненными на предыдущем шаге в процессе регистрации, если только они не нажмут кнопку «Создать». адрес, который отображает пустые поля для ввода нового адреса.

Как мне структурировать это с помощью Formik? Как я могу инициализировать поля адреса с помощью ввода из предыдущего шага, удалить эти поля, если пользователь выбирает «Новый адрес», но добавить их обратно, если пользователь затем снова нажимает «Тот же адрес»?

Должно ли быть несколько тегов Form внутри одного тега Formik?

Вот что у меня так далеко?

<Grid container className={classes.root}>
      <h1 className={classes.title}>Your preferred method</h1>
      <Grid container justify="center" className={classes.subContainer}>
        <Grid item sm={12} md={6}>
        <SwitchButtons
          optionOneChecked={creditCard} 
          optionTwoChecked={bankAccount}
          chooseOptionOne={chooseCreditCard}
          chooseOptionTwo={chooseBankAccount}
          optionOneText={"Credit Card"}
          optionTwoText={"Bank Account"}
        />
        {creditCard && (
          <Formik
            initialValues={{
              name: '',
              cardNumber: '',
              expirationDate: '',
              securityCode: ''
            }}
            validationSchema={creditCardSchema}
            onSubmit={() => {}}
          >{() => (
            <Form>
              <Grid item className={classes.fieldContainer}>
                <Field name="name" id="name" label="Name on Card" component={FormikTextField} className={classes.textField} />
                <Field name="cardNumber" id="cardNumber" label="Card Number" component={CardNumberField} className={classes.textField} />
                <Field name="expirationDate" id="expirationDate" label="Expiration Date" component={DateField} className={classes.textField} />
                <Field name="securityCode" id="securityCode" label="CVV" inputProps={{ maxLength: 3 }} component={FormikTextField} className={classes.textField} />
              </Grid>
            </Form>
          )}
          </Formik>
        )}
        {bankAccount && (
          <Formik
            initialValues={{
              name: '',
              bankAccountNumber: '',
              routingNumber: ''
            }}
            validationSchema={bankAccountSchema}
            onSubmit={() => {}}
          >{() => (
            <Form>
              <Grid item className={classes.fieldContainer}>
                <Field name="name" id="name" label="Name on Account" component={FormikTextField} className={classes.textField} />
                <Field name="bankAccountNumber" id="bankAccountNumber" label="Bank Account Number" inputProps={{ maxLength: 12 }} component={FormikTextField} className={classes.textField} />
                <Field name="routingNumber" id="routingNumber" label="Routing Number" inputProps={{ maxLength: 9 }} component={FormikTextField} className={classes.textField} />
              </Grid>
            </Form>
          )}
          </Formik>
        )}
         <h3>Billing Information</h3>
          <SwitchButtons
            optionOneChecked={sameAddress} 
            optionTwoChecked={newAddress}
            chooseOptionOne={chooseSameAddress}
            chooseOptionTwo={chooseNewAddress}
            optionOneText={"Same Address"}
            optionTwoText={"New Address"}
          />
        {newAddress && (
          <Formik
            enableReinitialize={true}
            initialValues={billingAddressForm}
            validationSchema={newAddressSchema}
            onSubmit={() => null}
          >{() => (
            <Form>
              <Grid item className={classes.fieldContainer}>
                <Field name="address1" id="address1" label="Street Address" component={FormikTextField} className={classes.textField} />
                <Field name="address2" id="address2" label="Unit" component={FormikTextField} className={classes.textField} />
                <Field name="postalCode" id="postalCode" label="Zip Code" inputProps={{ maxLength: 5 }} component={FormikTextField} className={classes.textField} />
                <Field name="city" id="city" label="City" component={FormikTextField} className={classes.textField} />
                <Field name="state" id="state" label="State" inputProps={{ maxLength: 2 }} component={FormikTextField} className={classes.textField} />
              </Grid>
            </Form>
          )}
          </Formik>
        )}
        <Button type="submit" className={classes.button} variant="contained">Continue</Button>
        </Grid>
        <Grid item sm={12} md={6}>
          <Hidden smDown>
            <img src={SecureGraphic} alt="Secure Graphic" />
          </Hidden>
        </Grid>
      </Grid>
    </Grid>