title: React hook form setValue returns undefined with multi select (react-select)
body: <p>I'm trying to build a form using React with select elements from react-select and the validation done using react-hook-form.</p>
  <p>Upon change the value seems to successfully change, but when I submit the form the select value is undefined.</p>
  <p>I have input fields and those work properly, but for my select and multi-select elements it fails.</p>
  <p>New to React so very confused, tried to find an answer to this but not able to. Removed some of the code to keep the interesting parts, hopefully I got it right.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Collapsible from &quot;../collapsible/Collapsible&quot;
  import Select, { components } from 'react-select';
  import axios from &quot;axios&quot;;
  import { useInput } from &quot;../../hooks&quot;
  import { useForm } from 'react-hook-form';
  import { selectStyles } from &quot;./styles&quot;
  import allBots  from &quot;../../data/bots&quot;;
  import platforms from &quot;../../data/platforms&quot;;
  import connectionTypes from &quot;../../data/connection_types&quot;;
  import generatePayload from &quot;./generate_payload&quot;;
  
  const Connect = () =&gt; {
    const { setValue, register, handleSubmit, errors } = useForm();
  
    const [values, setValues] = useState({
      selectedOption: []
    });
    
    const CustomOption = props =&gt; {
      return (
        &lt;components.Option {...props}&gt;
          &lt;div style={{ display: &quot;inline-block&quot;, &quot;min-width&quot;: &quot;40px&quot; }}&gt;{props.data.suffix}&lt;/div&gt;
          &lt;div style={{ display: &quot;inline-block&quot; }}&gt;{props.data.value}&lt;/div&gt;
        &lt;/components.Option&gt;
      );
    };
  
    const handleBotChange = selectedBot =&gt; {
      setValue(&quot;bots&quot;, selectedBot);
      setValues(selectedBot);
    };
  
    const handleMultiChange = selectedOption =&gt; {
      console.log(selectedOption);
      setValue(&quot;platform&quot;, selectedOption);
      setValues(selectedOption);
    };
  
    const onSubmit = (data) =&gt; {
      console.log(data);
      // outputs { &quot;bots&quot;: undefined, &quot;platform&quot;: undefined, username: &quot;theinput&quot; }
    }
    return (
      &lt;Collapsible className=&quot;collapsible&quot; header=&quot;Connect&quot;&gt;
        &lt;div className=&quot;collapsibleContent&quot;&gt;
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
            &lt;Select
              className=&quot;reactSelect&quot;
              name=&quot;platform&quot;
              placeholder=&quot;Platform&quot;
              value={values.platform}
              onChange={handleMultiChange}
              options={platforms}
              ref={e =&gt; register({ name: &quot;platform&quot;, required: true })}
            /&gt;
            &lt;Select
              isMulti
              name=&quot;bots&quot;
              options={bots}
              onChange={handleBotChange}
              closeMenuOnSelect={false}
              blurInputOnSelect={false}
              className=&quot;basic-multi-select formItem&quot;
              classNamePrefix=&quot;select&quot; 
              components={{Option: CustomOption}}  
              styles={selectStyles}
              placeholder=&quot;Bots&quot;
              ref={e =&gt; register({ name: &quot;bots&quot;, required: true })}
            /&gt;
            &lt;input
              name=&quot;username&quot;
              ref={register({
                validate: value =&gt; value !== &quot;illegal_value&quot; || &quot;Illegal value&quot;
              })}
            /&gt;
            {errors.username &amp;&amp; errors.username.message}
  
            &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/Collapsible&gt;
    );
  }
  
  export default Connect; 
  </code></pre>
  <p><strong>Update:</strong>
  I decided to use the &quot;Controller&quot; functionality of react-hook-form to integrate it with react-select. This is how part my code ended up. I also use SocketIO events in order to dynamically populate the options in the dropdown list. This solution isn't perfect but it's something.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Collapsible from &quot;../collapsible/Collapsible&quot;
  import Select, { components } from 'react-select';
  import { useForm, Controller } from 'react-hook-form';
  import { selectStyles } from &quot;./styles&quot;
  import connectionTypes from &quot;../../data/connection_types&quot;;
  import { OptionWithSuffix } from &quot;../form_components/components&quot;;
  
  import socket from &quot;../socket&quot;;
  
  const Connect = () =&gt; {
    const { errors, control, watch, getValues, handleSubmit, register, setValue, reset } = useForm();
    const watchFields = watch([&quot;connectionType&quot;]);
    const [bots, setBots] = useState([]);
    const connectionType = getValues(&quot;connectionType&quot;) || {};
    
    useEffect(() =&gt; {
      socket.on(&quot;bots&quot;, data =&gt; {
        setBots(data.map(obj =&gt; ({...obj, suffix: obj.count, value: obj.name, label: obj.name})));
      });
      return () =&gt; {
        socket.off(&quot;bots&quot;);
      };
    }, []);
  
    const onSubmit = (data) =&gt; {
      console.log(data);
    }
    
    return(  
      &lt;Collapsible className=&quot;collapsible&quot; header=&quot;Connect&quot;&gt;
        &lt;div&gt;
          &lt;form onSubmit={handleSubmit(data =&gt; onSubmit(data))}&gt;    
          &lt;Controller
            control={control}
            as={&lt;Select className=&quot;formItem&quot; options={platforms} /&gt;}
            rules={{ required: true }}
            placeholder=&quot;Select platform&quot;
            name=&quot;platform&quot;
            styles={selectStyles}
            register={register}
            setValue={setValue}
          /&gt;
          &lt;Controller
            control={control}
            as={&lt;Select className=&quot;formItem&quot; options={connectionTypes}/&gt;}
            rules={{ required: true}}
            placeholder=&quot;Select connection type&quot;
            name=&quot;connectionType&quot;
            styles={selectStyles}
            register={register}
            setValue={setValue}
          /&gt;
          {errors.connectionType &amp;&amp; &quot;Connection type is required&quot;}
          {connectionType.value === &quot;specific&quot; &amp;&amp;
            &lt;Controller
            control={control}
            as={
              &lt;Select 
                isMulti 
                className=&quot;formItem&quot; 
                options={bots}
                closeMenuOnBlur={false}
                closeMenuOnSelect={false}
                components={{Option: OptionWithSuffix}}  
                styles={selectStyles}
              /&gt;
            }
            rules={{ required: true }}
            placeholder=&quot;Select bots&quot;
            name=&quot;bots&quot;
            rules={{ required: true }}
            register={register}
            setValue={setValue}
          /&gt;
          }
          {errors.platform &amp;&amp; connectionType.value === &quot;specific&quot; &amp;&amp; &quot;Bots are required&quot;}    
          &lt;input className=&quot;formItem&quot; type=&quot;submit&quot; placeholder=&quot;Connect&quot;/&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/Collapsible&gt;
    );
  }
  export default Connect;  
  </code></pre>