title: Formik FieldArray input value for nested form input
body: <p>I have Formik FieldArray integration in my React Web app as below, but I am not getting values of input field when I enter value in textfield, handleChange event is not working I think. How can I get input values in below case.</p>
  
  <p>From <code>WrapperForm</code> also I am calling different sub form or children. I am not sure how to pass props to children.</p>
  
  <pre><code> return (
    &lt;div className={classes.container}&gt;
      &lt;Formik
        initialValues={{
          profile: [
            {
              id: Math.random(),
              firstName: "Test",
              lastName: "",
              email: ""
            }
          ]
        }}
        validationSchema={validationSchema}
        onSubmit={values =&gt; {
          console.log("onSubmit", JSON.stringify(values, null, 2));
        }}
      &gt;
        {({ values, touched, errors, handleChange, handleBlur, isValid }) =&gt; (
          &lt;Form noValidate autoComplete="off"&gt;
            &lt;FieldArray name="profile"&gt;
              {({ push, remove }) =&gt; (
                &lt;div&gt;
                  {values.profile.map((p, index) =&gt; {
  
                    return (
                      &lt;div key={p.id}&gt;
                          &lt;Grid container spacing={3} &gt;
                              &lt;Grid item xs={12} sm={6}&gt;
                                  &lt;WrapperForm index = {index} remove={remove} touched={touched} errors={errors} handleChangeOnText={handleChange} handleBlur={handleBlur} /&gt; 
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                      &lt;/div&gt;
                    );
                  })}
                  &lt;Button
                    className={classes.button}
                    variant="contained"
                    color="primary"
                    startIcon={&lt;AddCircleIcon /&gt;}
                    onClick={() =&gt;
                      push({ id: Math.random(), firstName: "", lastName: "" })
                    }
                  &gt;
                    Add More
                  &lt;/Button&gt;
                &lt;/div&gt;
              )}
            &lt;/FieldArray&gt;
            &lt;Divider style={{ marginTop: 20, marginBottom: 20 }} /&gt;
            &lt;Button
              className={classes.button}
              type="submit"
              color="primary"
              variant="contained"
              // disabled={!isValid || values.people.length === 0}
            &gt;
              submit
            &lt;/Button&gt;
            &lt;Divider style={{ marginTop: 20, marginBottom: 20 }} /&gt;
            {debug &amp;&amp; (
              &lt;&gt;
                &lt;pre style={{ textAlign: "left" }}&gt;
                  &lt;strong&gt;Values&lt;/strong&gt;
                  &lt;br /&gt;
                  {JSON.stringify(values, null, 2)}
                &lt;/pre&gt;
                &lt;pre style={{ textAlign: "left" }}&gt;
                  &lt;strong&gt;Errors&lt;/strong&gt;
                  &lt;br /&gt;
                  {JSON.stringify(errors, null, 2)}
                &lt;/pre&gt;
              &lt;/&gt;
            )}
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
  </code></pre>
  
  <p>WrapperForm.js</p>
  
  <pre><code>export default function HorizontalLinearStepper({index, remove, touched, errors, handleChangeOnText, handleBlur}) {
  
  ....
  ....
  
  function getStepContent(step, index, touched, errors, handleChangeOnText, handleBlur) {
    switch (step) {
     case 0:
      return &lt;Profile index={index} touched={touched} errors={errors} handleChangeOnText=. {handleChangeOnText} handleBlur={handleBlur} /&gt;;
     case 1:
      return &lt;Offer index={index} touched={touched} errors={errors} handleChangeOnText=. {handleChangeOnText} handleBlur={handleBlur} /&gt;;
    case 2:
     return 'This is the bit I really care about!';
    default:
    return 'Unknown step';
   }
  }
  return (
  &lt;div className={classes.layout}&gt;
      &lt;Paper variant="outlined" className={classes.paper}&gt;
          &lt;Grid container spacing={3}&gt;
              &lt;Grid item xs={12} sm={6}&gt;
                  &lt;TextField
                      required
                      id="email"
                      //name={`${member}.email`}
                      label="Email"
                      fullWidth
                      autoComplete="email"
                  /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12} sm={4}&gt;
                  &lt;InputLabel htmlFor="brand-native-simple"&gt;Brand&lt;/InputLabel&gt;
                  &lt;Select
                      native
                      value={state.brand}
                      onChange={handleChange}
                      inputProps={{
                          name: 'brand',
                          id: 'brand-native-simple',
                      }}
                  &gt;
                      &lt;option aria-label="None" value="" /&gt;
                      &lt;option value={'gp'}&gt;GAP&lt;/option&gt;
                      &lt;option value={'br'}&gt;BANANA REP&lt;/option&gt;
                      &lt;option value={'on'}&gt;OLDNAVY&lt;/option&gt;
                  &lt;/Select&gt;
              &lt;/Grid&gt;
          &lt;/Grid&gt;
              &lt;Stepper activeStep={activeStep} className={classes.stepper} &gt;
              {steps.map((label, index) =&gt; {
              const stepProps = {};
              const labelProps = {};
              if (isStepOptional(index)) {
                  labelProps.optional = &lt;Typography variant="caption"&gt;Optional&lt;/Typography&gt;;
              }
              if (isStepSkipped(index)) {
                  stepProps.completed = false;
              }
              return (
                  &lt;Step key={label} {...stepProps}&gt;
                  &lt;StepLabel {...labelProps}&gt;{label}&lt;/StepLabel&gt;
                  &lt;/Step&gt;
              );
              })}
          &lt;/Stepper&gt;
          &lt;div&gt;
              {activeStep === steps.length ? (
              &lt;div&gt;
                  &lt;Typography className={classes.instructions}&gt;
                  All steps completed - you&amp;apos;re finished
                  &lt;/Typography&gt;
                  &lt;Button onClick={handleReset} className={classes.button}&gt;
                  Reset
                  &lt;/Button&gt;
              &lt;/div&gt;
              ) : (
              &lt;div&gt;
                  {getStepContent(activeStep, index, touched, errors, handleChangeOnText, handleBlur)} 
  
                  &lt;div&gt;
                  &lt;Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}&gt;
                      Back
                  &lt;/Button&gt;
                  {isStepOptional(activeStep) &amp;&amp; (
                      &lt;Button
                      variant="contained"
                      color="primary"
                      onClick={handleSkip}
                      className={classes.button}
                      &gt;
                      Skip
                      &lt;/Button&gt;
                  )}
  
                  &lt;Button
                      variant="contained"
                      color="primary"
                      onClick={handleNext}
                      className={classes.button}
                  &gt;
                      {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                  &lt;/Button&gt;
                  &lt;Button
                      variant="contained"
                      color="secondary"
                      className={classes.button}
                      startIcon={&lt;DeleteIcon /&gt;}
                      onClick={() =&gt; remove(index)}
                  &gt;
                      Remove
                  &lt;/Button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              )}
  </code></pre>