title: React | Ant design select value not setting
body: <p>I am trying to add Select All / Unselect All to React Antd's 'SELECT' component.</p>
  
  <p>My code</p>
  
  <pre><code>const models = ['A4', 'A6', 'A8', 'A1', 'Q3', 'Q5'];
  const [selected, setSelected] = useState({
    models: [],
  });
  
  console.log('selected', selected);
  
  const handleModelSelect = (option) =&gt; {
    if (option === 'all') {
      if (selected.models.length === models.length) {
        setSelected((prev) =&gt; ({ ...prev, models: [] }));
      } else {
        setSelected((prev) =&gt; ({ ...prev, models }));
      }
    } else {
      setSelected((prev) =&gt; ({ ...prev, models: uniq([...prev.models, option]) }));
    }
  };
  
  return
  (&lt;Form&gt;
    &lt;Form.Item
      name="model"
      style={{ display: 'inline-block', width: 'calc(33% - 8px)' }}
    &gt;
      &lt;Select mode="multiple" placeholder="Models" value={selected.models} onSelect={handleModelSelect}&gt;
        &lt;Option value="all"&gt;Select all&lt;/Option&gt;
        {map(models, model =&gt; &lt;Option value={model} key={model}&gt;{model}&lt;/Option&gt;)}
      &lt;/Select&gt;
    &lt;/Form.Item&gt;
  &lt;/Form&gt;)
  </code></pre>
  
  <p>I see that I do get everything selected &amp; unselected in the "selected.models", however the issue is that the Select component visually does NOT update itself, meaning it stays with things I have selected/unselected.</p>
  
  <p>Really weird behavior.</p>