title: Controller submitting undefined with React Select
body: <p>I'm trying to use React Select with useForm and got stuck when submitting form values.</p>
  <p>My goal is a multi value react select with a default value and onChange function to do some validations when changing (like limit the number of itens to 3).</p>
  <p>I already tried to search the solution in others posts and did make some changes in my code but unfortunately I did not succeed.</p>
  <p>Everything seems to work perfectly but when I submit the form, my controller results in undefined value.</p>
  <pre><code>import React, {useEffect, useState, useContext} from 'react'
  import {useForm, Controller} from 'react-hook-form'
  import axios from 'axios';
  import Select from 'react-select';
  import BeeUtils from '../../../utils/BeeUtils'
  
  export default function EditCategory2({place, goBack}){
     var messageFieldRequired = 'Campo Obrigatório';
      
        const audienceOptions = [
          { value: 'Lésbicas', label: 'Lésbicas' },
          { value: 'Gays', label: 'Gays' },
          { value: 'Bissexuais', label: 'Bissexuais' },
          { value: 'Transexuais', label: 'Transexuais' },
          { value: 'Queer', label: 'Queer' },
          { value: 'Intersexo', label: 'Intersexo' },
          { value: 'Assexual', label: 'Assexual' },
          { value: 'Héteros', label: 'Héteros' },
          { value: 'Todxs', label: 'Todxs' }
        ]
  
      const handleAudienceSelector = (e) =&gt; {
          console.log('OK');    
          console.log(e);
          if(e.length &gt; 3){
                  e.pop();
                  alert('max of 3 selected');
          }
      }
      
      
      const {register , handleSubmit, errors, setValue, getValues, setError, control} = useForm();
  
      
      const requestUpdate = async (data) =&gt; {
          data.createdBy = place.createdBy;
          data._id = place._id;
          data.recordUpdatedType = 'audience';
          console.log(data);
          return;
      }
  
  
      const selectRequired = (e) =&gt; {
          console.log(e);
          console.log('OK-2');
          //var error = e.length == 0? messageFieldRequired : '';
          //return error;
      }
      
      const onSubmit = data =&gt; {
              console.log(data)
              requestUpdate(data);
          }  
      
          return (
              &lt;div className='cad-form'&gt;
            &lt;form onSubmit={handleSubmit(onSubmit)}&gt; 
            &lt;div className='cad-tit-container'&gt; 
               &lt;span className='cad-titulo'&gt; Edit Here&lt;/span&gt;
            &lt;/div&gt;
            
            &lt;div className='cad-container'&gt;
  
              &lt;label htmlFor='test-audience'&gt;Audience&lt;/label&gt;  
              &lt;Controller
                      name=&quot;test-audience&quot;
                      control={control}
                      rules={{ validate: selectRequired }}
                      render={() =&gt; (
                          &lt;Select 
                              defaultValue={[audienceOptions[0], audienceOptions[1]]}
                              isMulti
                              onChange={handleAudienceSelector}
                              placeholder='Select Itens'
                              options={audienceOptions}
                              className=&quot;basic-multi-select selectCustom&quot;
                              classNamePrefix=&quot;select&quot;
                          /&gt;
                          )}
                  /&gt;
              {errors?.targetAudience &amp;&amp; &lt;p&gt;{errors.targetAudience.message}&lt;/p&gt;}
  
            &lt;/div&gt;
  
            &lt;div className='btn-container'&gt;
            &lt;div className='cad-btn'&gt;&lt;button onClick={(e) =&gt; goBack('initial')} className=&quot;btn waves-effect yellow darken-2&quot;&gt;Voltar&lt;/button&gt;&lt;/div&gt;
            &lt;div className='cad-btn'&gt;&lt;button type='submit' className=&quot;btn waves-effect yellow darken-2&quot;&gt;Salvar Alterações&lt;/button&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          )
      }
  </code></pre>
  <p>After some changes (thanks to help of the answer) I tried this code</p>
  <pre><code>import React, {useEffect, useState, useContext} from 'react'
  import {useForm, Controller} from 'react-hook-form'
  import axios from 'axios';
  import Select from 'react-select';
  import BeeUtils from '../../../utils/BeeUtils'
  
  export default function EditCategory2({place, goBack}){
      var messageFieldRequired = 'Campo Obrigatório';
      
        const audienceOptions = [
          { value: 'Lésbicas', label: 'Lésbicas' },
          { value: 'Gays', label: 'Gays' },
          { value: 'Bissexuais', label: 'Bissexuais' },
          { value: 'Transexuais', label: 'Transexuais' },
          { value: 'Queer', label: 'Queer' },
          { value: 'Intersexo', label: 'Intersexo' },
          { value: 'Assexual', label: 'Assexual' },
          { value: 'Héteros', label: 'Héteros' },
          { value: 'Todxs', label: 'Todxs' }
        ]
  
      const handleAudienceSelector = (e) =&gt; {
          console.log('OK');    
          console.log(e);
          if(e.length &gt; 3){
                  e.pop();
                  alert('max of 3 selected');
          }
      }
      
      
      const {register , handleSubmit, errors, setValue, getValues, setError, control} = useForm();
  
      
      const requestUpdate = async (data) =&gt; {
          data.createdBy = place.createdBy;
          data._id = place._id;
          data.recordUpdatedType = 'audience';
          console.log(data);
          return;
      }
      
      const onSubmit = data =&gt; {
              console.log(data)
              requestUpdate(data);
          }  
      
          return (
              &lt;div className='cad-form'&gt;
            &lt;form onSubmit={handleSubmit(onSubmit)}&gt; 
            &lt;div className='cad-tit-container'&gt; 
               &lt;span className='cad-titulo'&gt; Edit Here&lt;/span&gt;
            &lt;/div&gt;
            
            &lt;div className='cad-container'&gt;
  
              &lt;label htmlFor='test-audience'&gt;Audience&lt;/label&gt;  
              &lt;Controller
                name=&quot;targetAudience&quot;
                control={control}
                defaultValue={[audienceOptions[0], audienceOptions[1]]}
                rules={{ required: messageFieldRequired }}
                render={({ field: { onChange, value } }) =&gt; (
                  &lt;Select
                    value={value}
                    onChange={onChange}
                    isMulti
                    placeholder=&quot;Select Itens&quot;
                    options={audienceOptions}
                    className=&quot;basic-multi-select selectCustom&quot;
                    classNamePrefix=&quot;select&quot;
                  /&gt;
                )}
              /&gt;
  
            &lt;/div&gt;
  
            &lt;div className='btn-container'&gt;
            &lt;div className='cad-btn'&gt;&lt;button onClick={(e) =&gt; goBack('initial')} className=&quot;btn waves-effect yellow darken-2&quot;&gt;Voltar&lt;/button&gt;&lt;/div&gt;
            &lt;div className='cad-btn'&gt;&lt;button type='submit' className=&quot;btn waves-effect yellow darken-2&quot;&gt;Salvar Alterações&lt;/button&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
          &lt;/div&gt;
          )
      }
  </code></pre>
  <p>But now I got the error: TypeError: Cannot read property 'onChange' of undefined</p>