title: react-select doesn't re-render when updating the state
body: <p>I'm trying to set a multi filter that includes react-select.
  it works properly only when another part of the filter is activated (typing in the input for example).</p>
  <p>Tried console.logging inside the service, nothing happens when adding to the multi select, but only when i use the other types of filters.</p>
  <p>Filter component :</p>
  <pre><code>import React from 'react';
  import Select from 'react-select'
  
  const options =[
  {value:'on wheels', label : 'on wheels'},
  {value:'box game', label : 'box game'},
  {value:'art', label : 'art'},
  {value:'baby', label : 'baby'},
  {value:'doll', label : 'doll'},
  {value:'puzzle', label : 'puzzle'},
  {value:'outdoor', label : 'outdoor'},
  {value:'battery powered', label : 'battery powered'},]
  
  export class ToyFilter extends React.Component {
    state = {
      filterBy: {
        availability: '',
        txt: '',
        sortBy: '',
        labels:[]
      },
    };
  
    handleChange = ({ target }) =&gt; {
      const name = target.name;
      const value = target.value;
      console.log('name:', name);
      console.log('value:', value);
      
  
      this.setState(
        (prevState) =&gt; ({ filterBy: { ...prevState.filterBy, [name]: value } }),
        () =&gt; {
          this.props.onSetFilter(this.state.filterBy);
        }
      );
    };
  
    handleMultyChange=(ev)=&gt;{
      const labels = ev.map(option =&gt; option.value.toLowerCase())
      this.setState(prevState =&gt; ({ filterBy: { ...prevState.filterBy, labels } }))
    }
  
    render() {
  
      const { txt } = this.state.filterBy;
      return (
        &lt;section&gt;
          &lt;section&gt;
            &lt;label&gt;Sort: &lt;/label&gt;
            &lt;select name='sortBy' onChange={this.handleChange}&gt;
              &lt;option value=''&gt;No filter&lt;/option&gt;
              &lt;option value='alphabet'&gt;Alphabet&lt;/option&gt;
              &lt;option value='date'&gt;Date&lt;/option&gt;
              &lt;option value='price'&gt;price&lt;/option&gt;
            &lt;/select&gt;
          &lt;/section&gt;
          &lt;select name='availability' onChange={this.handleChange}&gt;
            &lt;option value='all' key='filter-all'&gt;
              All
            &lt;/option&gt;
            &lt;option value='true' key='filter-in-stock'&gt;
              in stock
            &lt;/option&gt;
            &lt;option value='false' key='filter-sold-out'&gt;
              sold out
            &lt;/option&gt;
          &lt;/select&gt;
          &lt;input type='text' name='txt' value={txt} onChange={this.handleChange} placeholder='Search toy...' /&gt;
          &lt;Select name=&quot;labels&quot; isMulti options={options} onChange={this.handleMultyChange}/&gt;
        &lt;/section&gt;
      );
    }
  }
  </code></pre>
  <p>Filter function inside the service :</p>
  <pre><code>unction _filteredToys(toys, filterBy) {
    let { txt, availability, sortBy,labels} = filterBy;
    console.log('filterBy:', filterBy);
    
  
    if (sortBy === 'alphabet') toys.sort((b1, b2) =&gt; b1.name.localeCompare(b2.name));
    if (sortBy === 'date') toys.sort((b1, b2) =&gt; b1.createdAt - b2.createdAt);
    if (sortBy === 'price') toys.sort((b1, b2) =&gt; b1.price - b2.price);
  
  
    const filetered = toys.filter((toy)=&gt;{
      return labels.every(i =&gt; toy.labels.includes(i));
    })
  
    if (availability === 'true') { //json.parse
      availability = true;
    } else if (availability === 'false') {
      availability = false;
    } else {
      return toys.filter((toy) =&gt; {
        return toy.name.includes(txt);
      });
    }
  
    const filteredtoys = filetered.filter((toy) =&gt; {
      return toy.name.includes(txt) &amp;&amp; toy.inStock === availability 
    });
  
    return Promise.resolve(filteredtoys);
  }
  </code></pre>