title: How to assign object validation in yup for react-select (single-select)
body: <p>I am trying to implement validation for react-select (single-select) using yup concept. But i am getting this error:</p>
  
  <blockquote>
    <p>Objects are not valid as a React child (found: object with keys {label, value}). If you meant to render a collection of children, use an array instead.</p>
  </blockquote>
  
  <p>I want to know how to assign objects in validation schema for yup concept</p>
  
  <pre><code>&lt;Formik
    initialValues={{
      department:"",
    }}
    onSubmit={this.submitForm}
    validationSchema={Yup.object().shape({
      department: Yup.object().shape({
        label: Yup.string().required(),
        value: Yup.string().required(),
      }),
  })}&gt;
  { props =&gt; {
    const {
      values,
      touched,
      errors,
      isSubmitting,
      handleChange,
      handleBlur,
      handleSubmit,
      selectedOption
    } = props;
    return (
      &lt;React.Fragment&gt;
  
      &lt;InputLabel shrink htmlFor={'department'}&gt;
      Department&lt;/InputLabel&gt;
      &lt;Select
            inputId="department"
            options={options}
            value={values.department}
            onChange={this.onChangeOption}
            onBlur={handleBlur}         
         /&gt;
  {errors.department &amp;&amp; touched.department &amp;&amp; ( {errors.department} )} 
  Submit &lt;/div&gt; &lt;/React.Fragment&gt; ); }} 
  </code></pre>