title: Programmatically change the value of react-select component
body: <p>I'm using the <a href="https://react-select.com/home" rel="nofollow noreferrer">react-select</a> component in a React app pretty heavily. I've created a wrapper component which allows me to specify a use-case where I want the selected value to reset on selection.</p>
  <p>My component wrapper is defined as:</p>
  <pre><code>import React, { useRef } from 'react';
  import Select from 'react-select'
  export const SelectComponent = (props) =&gt; {
      const selectRef = useRef(null);
  
      const valueSelected = (item) =&gt; {
          if (!item || item.value === props.selectedValue) {
              return;
          }
  
          if (props.resetOnSelect) {
              selectRef.current.select.clearValue();
          }
          props.onValueSelected(item);
      }
  
      return &lt;div className=&quot;modal-form-row&quot;&gt;
          &lt;Select ref={selectRef} options={props.options} onChange={valueSelected} id={props.id} isClearable={true} isSearchable={true} placeholder={props.label} value={props.selectedValue} /&gt;
      &lt;/div&gt;;
  }
  </code></pre>
  <p>And this is how the component gets referenced:</p>
  <pre><code>const options = [
      { label: 'Item1', value: '1' },
      { label: 'Item2', value: '2' },
      { label: 'Item2', value: '2' },
  ];
  &lt;SelectComponent id=&quot;select-list&quot; label=&quot;Pick an Item&quot; options={options} onValueSelected={this.handleNewItem} value=&quot;&quot; resetOnSelect={true} /&gt;
  </code></pre>
  <p>It appears to be working, as my <code>valueSelected</code> handler is called a second time with a null argument, but the select component itself doesn't re-render, it leaves the user's selection showing. Any ideas on what I should try next?</p>