title: react-select not updating selected value on initial select
body: <p>You can find the below example to see my issue:
  <a href="https://codesandbox.io/s/so-answer-55173409-forked-qdv54?file=/src/index.js" rel="nofollow noreferrer">codesandox example</a></p>
  <p>If I set the name property of the object, it works fine. But it is not working in other example in my application:</p>
  <pre><code>  setRegion(item.name);
  </code></pre>
  <p>Application example:</p>
  <p>My <code>usestate</code> looks like this:</p>
  <pre><code> const [department, setDepartment] = useState(&quot;&quot;);
  </code></pre>
  <p>Here is my application example:</p>
  <pre><code>                      &lt;div className=&quot;sui-search-box&quot;&gt;
                          &lt;div className=&quot;department&quot;&gt;
                              &lt;label&gt;
                                Department:
                                &lt;Select id=&quot;depart&quot; value={department} onChange={selectedValue =&gt; 
                                  {
                                  setDepartment(selectedValue.value);
                                  setFilter(&quot;department&quot;, selectedValue.value, &quot;any&quot;)
                                }}
                                options = {
                                  results.map((depart, index) =&gt; {
                                    return {
                                      label: depart.name,
                                      value:depart.name,
                                      key:index
                                    }
                                  })
                                }
                                /&gt;
                                {department}
                                &lt;/label&gt; 
                            &lt;/div&gt;
                       &lt;/div&gt;
  </code></pre>
  <p>what is the right approach to set the state and why my current sandbox is not binding properly ?</p>