title: React-select: How to add created items to options list
body: <p>So I'm using the Creatable component of the <code>react-select</code> library. I want to be able to add the created option into my options array on keyDown.  <a href="https://stackblitz.com/edit/react-b9htkt?file=src%2FApp.js" rel="nofollow noreferrer">How it looks right now</a></p>
  <p>My states:</p>
  <pre><code>  const [value, setValue] = useState([]);
    const [inputValue, setInputValue] = useState('');
    const [selectedValues, setselectedValues] = useState([]);
  
    const [current, setCurrent] = useState([]);
  
    const [selection, setSelection] = useState(statusOptions);
  </code></pre>
  <p>My functions</p>
  <pre><code> const handleInputChange = (value) =&gt; {
      setInputValue(value);
    };
    const handleOnChange = (haha) =&gt; {
      setCurrent(haha);
    };
  
    const handleKeyDown = () =&gt; {
      setTimeout(() =&gt; {
        setNewValues();
      }, [2700]);
    };
  
    const setNewValues = (event) =&gt; {
      const newOption = { label: inputValue, inputValue };
      inputValue !== '' &amp;&amp; setSelection([...selection, newOption]);
  
      setCurrent(current);
      let difference = current.filter((x) =&gt; !value.includes(x));
  
      setInputValue('');
  
      setselectedValues(difference);
    };
  </code></pre>
  <p>How the component looks</p>
  <pre><code>&lt;CreatableSelect
          options={selection}
          isMulti
          onChange={handleOnChange}
          onInputChange={handleInputChange}
          inputValue={inputValue}
          value={selectedValues.selected}
          inputValue={inputValue}
          onKeyDown={handleKeyDown}
        /&gt;
  </code></pre>
  <p>The problem: Right now, the inputValue is added to the dropdown list as the user types and i don't know why. I am able to add and delete the tags on keyDown. But when the user types slow or doesn't write quick enough, the dropdown list ends up with two created options.</p>