title: Validation using Formik with Yup and React-select
body: <p>I'm working with a react form validation using <code>Yup</code> along with <code>Formik</code>.
  There is a <code>react-select</code> element in the form which needs to be validated as well. For validation i'm making use of <code>validationSchema</code> of <code>Formik</code> to validate form on value change.
  I need only value of the select field as a string so cant take the complete object (key-value).
  The select field is working fine how ever the validation error message is not cleared.
  The question is how can I validate the select field with existing approach?</p>
  
  <p>Below is the minimal code sample.</p>
  
  <pre><code>import ReactDOM from "react-dom";
  import React, { useState } from "react";
  import { Grid, TextField, Button } from "@material-ui/core";
  import { Formik } from "formik";
  import * as Yup from "yup";
  import Select from "react-select";
  import "./styles.css";
  
  function App() {
    const [selectedYear, setSelectedYear] = useState("");
  
    const testSchema = Yup.object().shape({
      name: Yup.string().required("Enter Name"),
      year: Yup.string().required("Select Year")
    });
  
    const initialValues = {
      name: "",
      year: ""
    };
  
    const handleYearChange = (selectedYear, values) =&gt; {
      values.year = selectedYear.value;
      console.log(selectedYear);
      setSelectedYear(selectedYear);
    };
  
    const yearOptions = [
      { value: "1960", label: "1960" },
      { value: "1961", label: "1961" },
      { value: "1962", label: "1962" },
      { value: "1963", label: "1963" },
      { value: "1964", label: "1964" },
      { value: "1965", label: "1965" }
    ];
  
    return (
      &lt;Formik validationSchema={testSchema} initialValues={initialValues}&gt;
        {({
          handleChange,
          handleBlur,
          values,
          errors,
          touched,
          handleSubmit,
          setFieldTouched
        }) =&gt; {
          return (
            &lt;&gt;
              &lt;Grid container spacing={2}&gt;
                &lt;Grid item md={12} xs={12}&gt;
                  &lt;TextField
                    label="Name"
                    name="name"
                    margin="normal"
                    variant="outlined"
                    onChange={handleChange("name")}
                    style={{ width: "100%", zIndex: 0 }}
                    value={values.name}
                    onBlur={() =&gt; {
                      console.log("name");
                    }}
                  /&gt;
                  {errors.name}
                &lt;/Grid&gt;
  
                &lt;Grid item md={6} xs={12}&gt;
                  &lt;Select
                    placeholder="Year"
                    value={selectedYear}
                    onChange={selectedOption =&gt; {
                      handleYearChange(selectedOption);
                      // handleYearChange(selectedOption, values);
                      // values.year = selectedOption.value;
                      console.log("values", values.year);
                      handleChange("year");
                    }}
                    isSearchable={true}
                    options={yearOptions}
                    name="year"
                    isLoading={false}
                    loadingMessage={() =&gt; "Fetching year"}
                    noOptionsMessage={() =&gt; "Year appears here"}
                  /&gt;
                  {errors.year}
                &lt;/Grid&gt;
                &lt;Grid
                  item
                  md={4}
                  style={{ marginTop: "24px", marginBottom: "10px" }}
                  xs={12}
                &gt;
                  &lt;Button onClick={handleSubmit}&gt;Save&lt;/Button&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
            &lt;/&gt;
          );
        }}
      &lt;/Formik&gt;
    );
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  
  <p>Here is the codesandbox :</p>
  
  <p><a href="https://codesandbox.io/s/throbbing-shadow-6f6yw?fontsize=14" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit throbbing-shadow-6f6yw"></a></p>
  
  <p>PS: I'm new to Reactjs.</p>