title: ReactJS: Validation not working with Yup using Formik multistep form
body: <p>I have a multi steps form in which i have used a <code>Formik</code> and <code>Yup</code> libraries.</p>
  
  <p>But the validation that i am using of yup library is not working at all. In React debugger tool i am getting it's value as empty. So, whatever i write in the input field it validates with "Required" message as it's value is empty. </p>
  
  <pre><code>import { Formik, Form, Field, ErrorMessage } from 'formik';
  import * as Yup from 'yup';
  
  let accountInfoSchema = Yup.object().shape({
    name: Yup.string()
    .max(20, 'Too Long!')
    .required('Name is Required'),
  });
  
  class AccountInfo extends Component {
   handleChange = event =&gt; {
      this.setState({    
        userAccountData: Object.assign(
          {}, 
          this.state.userAccountData,
          { [event.target.name]: event.target.value }
        ),
      })
    }
  
   AccountInfoView = () =&gt; {
      return (
        &lt;section className="form"&gt;
        &lt;React.Fragment&gt;
          &lt;Formik
            initialValues={{name:'' }}
            validationSchema={accountInfoSchema}
            render={() =&gt; {
            return(
          &lt;Form onSubmit={this.handleSubmit}&gt;
          {this.Step1()}
          {this.Step2()}
          {this.Step3()}
          &lt;li className="stb_btn half"&gt;
            &lt;div className="custom_group"&gt;
              {this.previousButton()}
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li className="stb_btn half"&gt;
            &lt;div className="custom_group"&gt;
              {this.nextButton()}
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;/Form&gt;
          );
        }}
        /&gt;
        &lt;/React.Fragment&gt;
        &lt;/div&gt;
      &lt;/section&gt;
      )
    }
  
  Step1 = () =&gt; {
  return(
  &lt;li&gt;
     &lt;div className="custom_group"&gt;
     &lt;Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} /&gt;
     &lt;label className="label_two"&gt;Name&lt;/label&gt;
     &lt;ErrorMessage name="name" /&gt;
     &lt;/div&gt;
   &lt;/li&gt;
  )
  }
  
  render() {    
  
      return (
        &lt;div&gt;{this.AccountInfoView()}&lt;/div&gt;
      )
    }
  
  
  }
  </code></pre>
  
  <p>please review the react console response for the value as empty. </p>
  
  <p><a href="https://i.stack.imgur.com/Kzr9E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kzr9E.png" alt="enter image description here"></a></p>