title: formik warning, A component is changing an uncontrolled input of type text to be controlled
body: <p>I am developing a dynamic form in React JS, when the user clicks on the Add button, the Register form is added to screen. In the Register form I am using formik for validation.</p>
  <p>The form is dynamically adding successfully but whenever I start entering any input in the input box, I am getting the following error in the console:</p>
  <pre class="lang-none prettyprint-override"><code>Warning: A component is changing an uncontrolled input of type text to be 
  controlled. Input elements should not switch from uncontrolled to controlled 
  (or vice versa). Decide between using a controlled or uncontrolled input element 
  for the lifetime of the component. 
  </code></pre>
  <p>I am not sure where it is wrong. Below is my dynamic form rendering code -</p>
  <p>Account.js</p>
  <pre><code>import React, { Component } from 'react';
  import axios from 'axios';
  import {
      Card, CardBody, CardHeader,Button,Col, Row, Form, Container
  } from 'reactstrap';
  import { Formik, Field, ErrorMessage } from 'formik';
  import WrapperForm from './WrapperForm'
  
  class Account extends Component {
  
    state = {
      wrapperForm: [{}]
    }
  
    constructor(props) {
      super(props);
    }
  
    addUser = () =&gt; {
      this.setState((prevState) =&gt; ({
        wrapperForm: [...prevState.wrapperForm, {}],
      }));
    }
  
    render() {
      let { wrapperForm } = this.state
      return (
        &lt;Form&gt;
          &lt;Container className=&quot;themed-container&quot; fluid={true}&gt;
            &lt;button type=&quot;button&quot; onClick={this.addUser}&gt;Add User&lt;/button&gt;
            &lt;WrapperForm wrapperForm={wrapperForm} /&gt;
          &lt;/Container&gt;
        &lt;/Form&gt;
      );
    }
  }
  
  export default Account;  
  </code></pre>
  <p>WrapperForm.js</p>
  <pre><code>const WrapperForm = (props) =&gt; {
    return (
      props.wrapperForm.map((val, idx)=&gt; {
        return (
          &lt;Formik 
            key={idx}
            initialValues={{
              email: props.wrapperForm[idx].email || '',
              password: props.wrapperForm[idx].password || '',
              firstName: props.wrapperForm[idx].firstName || '',
              lastName: props.wrapperForm[idx].lastName || '',
              zipCode: props.wrapperForm[idx].zipCode ||  ''
            }}
          &gt;
            {({ values }) =&gt; (
              &lt;Row style={{ marginBottom: &quot;2em&quot; }}&gt;
                &lt;Card&gt;
                  &lt;CardHeader&gt;Register&lt;/CardHeader&gt;
                  &lt;CardBody&gt;
                    &lt;Temp index={idx} /&gt;
                  &lt;/CardBody&gt;
                &lt;/Card&gt;
              &lt;/Row&gt;
            )}
          &lt;/Formik&gt;  
        )
      })
    )
  }
  </code></pre>
  <p>Temp.js</p>
  <pre><code>const Temp = ({ index }) =&gt; {
    let passwordId = 'password-'+ index;
    let firstNameId = 'firstName-'+ index;
    let lastNameId = 'lastName-'+ index;
    let zipCodeId = 'zipCode-'+ index;
  
    return (
      &lt;Card body outline color=&quot;primary&quot;&gt;
        &lt;CardTitle&gt;Create Profile&lt;/CardTitle&gt;
        &lt;Row form&gt;
          &lt;Col md={6}&gt;
            &lt;Field
              className=&quot;email&quot;
              component={customInputForm}
              data-id={index}
              id=&quot;email&quot;
              label=&quot;Email&quot;
              name=&quot;email&quot;
              placeholder=&quot;Email&quot;
              type=&quot;email&quot;
            /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Card&gt;
    )
  }
  </code></pre>