title: Formik lost fields when trigger a modal confirm
body: <p>I have a form using <code>Formik</code> library, all are right but when i want to confirm and submit i need to pass first a modal, the problem is when i launch the confirm modal all data i put in the form are eliminate and nothing is send, i noticed when the i launch the modal, the form tag are upload and then lost the data, someone has the same problem ? o are something to prevent the form tag upload when change the state of the modal ?</p>
  
  <p>here is part of my code, i use <code>CSSTransition</code> on the modal, that mount and unmount the component, and i call previous fields on the form using <code>FieldArray</code></p>
  
  <pre><code>&lt;Formik
    enableReinitialize
    initialValues={INITIAL_VALUES}
    onSubmit={(values) =&gt; {
      this.props.onSubmitForm(values.rows);
    }}
  &gt;
    {({ values, errors, touched, isValid }) =&gt; (
      &lt;Form&gt;
        &lt;Title /&gt;
        &lt;div className="wrapper__brick wrapper__brick--to-up"&gt;
          &lt;FieldArray
            name="rows"
            render={({ push }) =&gt; (
              &lt;&gt;
                &lt;div className="wrapper__block"&gt;
                  &lt;div className="master-table"&gt;
                    &lt;FieldArray
                      name="rows"
                      render={({ remove }) =&gt; (
                        &lt;div className="master-table__container"&gt;
                          {values.rows.length &gt; 0 &amp;&amp;
                            values.rows.map((rows, index) =&gt; (
                              &lt;div
                                className="master-table__row"
                                key={index}
                              &gt;
                                &lt;div className="master-table__item"&gt;
                                  &lt;Field
                                    className={errors.rows &amp;&amp; errors.rows[index] &amp;&amp; touched.rows &amp;&amp; touched.rows[index] ?
                                      'input input--empty is-danger'
                                      :
                                      'input input--empty'
                                    }
                                    name={`rows.${index}.name`}
                                    placeholder="Name"
                                    type="text"
                                    validate={validateName}
                                  /&gt;
                                  &lt;ErrorMessage
                                    name={`rows.${index}.name`}
                                    component="p"
                                    className="help is-danger"
                                  /&gt;
                                &lt;/div&gt;
                                &lt;div className="master-table__item"&gt;
                                  &lt;div className={rows.default ? 'select select--disabled' : 'select select--empty'}&gt;
                                    &lt;Field
                                      as="select"
                                      disabled={rows.default}
                                      name={`rows.${index}.kind`}
                                    &gt;
                                      {this.allowedKinds.map((row) =&gt; (
                                        &lt;option
                                          value={row.internal}
                                          key={row.internal}
                                        &gt;
                                          {row.name}
                                        &lt;/option&gt;
                                      ))}
                                    &lt;/Field&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div className="master-table__item"&gt;
                                  &lt;button
                                    className="button button--trigger tooltip is-tooltip-right"
                                    data-tooltip={rows.default ? t('common.deleteNotAvailable') : t('common.delete')}
                                    onClick={() =&gt; remove(index)}
                                    type="button"
                                    disabled={rows.default}
                                  &gt;
                                    &lt;span className="icon"&gt;
                                      &lt;i className="far fa-trash-alt" /&gt;
                                    &lt;/span&gt;
                                  &lt;/button&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            ))}
                        &lt;/div&gt;
                      )}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;Footer
                  onAddRow={() =&gt; push({
                    id: UUID.v4(),
                    name: '',
                    kind: 'string',
                    type: 'generic',
                    required: false,
                    default: false
                  })}
                  validForm={!isValid}
                /&gt;
                &lt;TransitionWrapper stateToggle={this.state.openModal}&gt;
                  &lt;ModalDialog
                    iconModal="fas fa-info-circle"
                    titleText={t('modals.descriptionContinue')}
                    onCloseMethod={this.handleShowModal}
                    onAcceptMethod={this.props.onSubmitForm}
                  /&gt;
                &lt;/TransitionWrapper&gt;
              &lt;/&gt;
            )}
          /&gt;
        &lt;/div&gt;
      &lt;/Form&gt;
    )}
  &lt;/Formik&gt;
  </code></pre>