title: Can't validate react-select using Formik with Yup
body: <p>I am trying to use formic and yup with react. In this project the selection button was created in a separate component using React Select. The attributes of the select tag are sending as the props. When I select an option in the selection tag, this error is occurred.</p>
  <p>×
  Error: Objects are not valid as a React child (found: object with keys {id}). If you meant to render a collection of children, use an array instead.</p>
  <p>Yup validation method</p>
  <pre><code>country: Yup.object({id: Yup.string().required('Please select a country'),}),
  </code></pre>
  <p>Initial data:</p>
  <pre><code>const formik = useFormik({
  initialValues: {
      country: {}
    }
  })
  </code></pre>
  <p>This is options</p>
  <pre><code>const countryOptions = [
  { id:&quot;1&quot;, value: &quot;india&quot;, label: &quot;India&quot; },
  { id:&quot;2&quot;, value: &quot;sri lanka&quot;, label: &quot;Sri Lanka&quot; },
  { id:&quot;3&quot;, value: &quot;us&quot;, label: &quot;US&quot; },
  </code></pre>
  <p>];</p>
  <p>Using selection</p>
  <pre><code>&lt;XSearchSelect
       label=&quot;Country&quot;
       options={countryOptions}
       id=&quot;country&quot;
       name=&quot;country&quot;
       onBlur={()=&gt;{
                formik.handleBlur({ target: {name:'country'} });
              }}
       onChange={(option) =&gt; {formik.setFieldValue(&quot;country&quot;,option.id);}}
       error={formik.errors.country}
       touched={formik.touched.country}
    /&gt;
  </code></pre>
  <p>Customized selection component</p>
  <pre><code>import React from 'react'
  import Select from 'react-select'
  
  const XSearchSelect = ({ value, onChange, options, label,error,onBlur,id,name,touched }) =&gt; {
  
  return (
      &lt;div&gt;
          &lt;div className=&quot;block text-xaplink_gray_3 text-sm font-bold mb-2&quot;&gt;{label}&lt;/div&gt;
          &lt;Select
              isClearable=&quot;true&quot;
              value={value}
              options={options}
              onChange={onChange}
              id={id}
              name={name}
              onBlur={onBlur}
              theme={theme =&gt; ({
                  ...theme,
                  borderRadius: 5,
                  colors: {
                    ...theme.colors,
                    primary25: 'silver',
                    primary50: 'gray',
                    primary: 'black',
                  },
                })
              }
          /&gt;
          {touched &amp;&amp; error ? (
       &lt;p className='text-xs pl-2    text-xaplink_red_2 mb-4'&gt;{error}&lt;/p&gt;
     ) : null}
      &lt;/div&gt;
  )
  }
  </code></pre>
  <p>export default XSearchSelect</p>