I have a multi steps form in which i have used a Formik and Yup libraries.

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.

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 => {
    this.setState({    
      userAccountData: Object.assign(
        {}, 
        this.state.userAccountData,
        { [event.target.name]: event.target.value }
      ),
    })
  }

 AccountInfoView = () => {
    return (
      <section className="form">
      <React.Fragment>
        <Formik
          initialValues={{name:'' }}
          validationSchema={accountInfoSchema}
          render={() => {
          return(
        <Form onSubmit={this.handleSubmit}>
        {this.Step1()}
        {this.Step2()}
        {this.Step3()}
        <li className="stb_btn half">
          <div className="custom_group">
            {this.previousButton()}
          </div>
        </li>
        <li className="stb_btn half">
          <div className="custom_group">
            {this.nextButton()}
          </div>
        </li>
        </Form>
        );
      }}
      />
      </React.Fragment>
      </div>
    </section>
    )
  }

Step1 = () => {
return(
<li>
   <div className="custom_group">
   <Field type="text" name="name" className="trans text_input" placeholder="Enter your name" value={this.state.userAccountData['name']} onChange={this.handleChange} />
   <label className="label_two">Name</label>
   <ErrorMessage name="name" />
   </div>
 </li>
)
}

render() {    

    return (
      <div>{this.AccountInfoView()}</div>
    )
  }


}

Review the react console response for the value as empty.