title: Using Controller component of react-hook-form doesn't allow custom Antd Select to show label
body: <p>I'm using <strong>Antd <a href="https://ant.design/components/select/" rel="nofollow noreferrer"><code>Select</code></a></strong> component to build a  custom component which gives me the ability to return an object instead of a primitive value and show nested value in object item in the select dropdown options, it works fine and it can be validated using <a href="https://react-hook-form.com/" rel="nofollow noreferrer"><code>react-hook-form</code></a> :</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Form.Item ... &gt;
    &lt;SpringSelect style={{ width: "200px" }} options={departments} placeholder="Department 2"
              name="department2"  onChange={e =&gt; {setValue("department2", e);}}/&gt;
  
  &lt;/Form.Item&gt;
  </code></pre>
  
  <p>This also works with <a href="https://react-hook-form.com/api#Controller" rel="nofollow noreferrer"><code>Controller</code></a> component however <strong><em>it doesn't show the label</em></strong> inside the select input :</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;Controller as={&lt;SpringSelect style={{ width: "200px" }} /&gt;}
              placeholder="Department 1" name="department1" options={departments}
              onChange={([e]) =&gt; {return { value: e };}} control={control}      /&gt;
  </code></pre>
  
  <p>for more details check the whole code in the codesandbox playground </p>
  
  <p><a href="https://codesandbox.io/s/proud-wildflower-3gndt?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit proud-wildflower-3gndt"></a></p>