title: Function components cannot be given refs. Attempts to access this ref will fail in select component
body: <p>Here I defined a select component, and I wanted to display it if a condition is true. This select field appears when one of the values ​​of the previous select input is selected. But here is when the new select field (i.e. my select component), and I choose a value from this select, this value is not submitted by my form, and is not present in my data when I do a console log after submitting my form, but the name of the value field is there, but not the value. And i have a warning in my console stating:
  <strong>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</strong></p>
  <p><strong>Check the render method of <code>Controller</code></strong></p>
  <p><strong>My Select Component</strong></p>
  <pre><code>export const SelectCompanyField = () =&gt; {
      // const [page, setPage] = useState(1);
      // const [perPage, setPerPage] = useState(10);
      const { data, error } = useSWR&lt;ServerResponse, any&gt;(companyUrls.base, url =&gt; getDataByParams(companyUrls.base));
      console.log(&quot;Data&quot;, data, &quot;Error&quot;, error);
      console.log(data?.entities);
  
  
      return (
  
          &lt;Select
  
              showSearch
              placeholder=&quot;Choisir une compagnie&quot;
              optionFilterProp=&quot;children&quot;
              filterOption={(input, option: any) =&gt;
                  option.children.toLowerCase().indexOf(input.toLowerCase()) &gt;= 0
              }
          &gt;
              {data?.entities.map(d =&gt; (
                  &lt;option value={d.index} key={d.id}  &gt;
                      {d.name}
                  &lt;/option&gt;
              ))}
  
          &lt;/Select&gt;
  
  
      );
  };
  </code></pre>
  <p><strong>The select component to display if the condition is true</strong></p>
  <pre><code>&lt;Col md={24} lg={24} sm={24}&gt;
  
  
                      {firstOptionValue &amp;&amp;
                          &lt;div className=&quot;ant-form-item&quot;&gt;
                              &lt;label className=&quot;label&quot;&gt;Compagnie &lt;span className=&quot;text-danger&quot;&gt;*&lt;/span&gt;&lt;/label&gt;
  
                              &lt;Controller
  
                                  as={&lt;SelectCompanyField /&gt;}
                                  name=&quot;company&quot;
                                  control={control}
                                  defaultValue={&quot;&quot;}
                                  rules={{ required: false }}
  
                              {errors.company &amp;&amp; &quot;Company is required&quot;}
                          &lt;/div&gt;
  
                      }
                  &lt;/Col&gt;
  </code></pre>
  <p><strong>The console log of my data submit</strong></p>
  <pre><code>{
      &quot;firstName&quot;: &quot;Atom&quot;,
      &quot;lastName&quot;: &quot;Proton&quot;,
      &quot;username&quot;: &quot;xyz@test.ml&quot;,
      &quot;password&quot;: &quot;00789&quot;,
      &quot;phoneNumber&quot;: &quot;44258569&quot;,
      &quot;profile&quot;: &quot;ADMIN&quot;,
      &quot;userType&quot;: &quot;B2B_CLIENT&quot;,
      &quot;company&quot;: &quot;&quot;
  }
  </code></pre>
  <p>The company part with the empty quotes, is the part where it should have the value of the field I chose in my select component.
  I would just like the selected value of the field or the option, appear in my data so that I can submit my form.
  Thanks</p>