title: Set value in react-bootstrap-typeahead
body: <p>First off, let me admit to being a React newbie...</p>
  <p>I want to set the value displayed and selected in this component <em>after</em> the first render (eg from a button)</p>
  <p>Here's my test code (with imports etc removed)</p>
  <pre><code>$(function () {
      const data = [
          {
          DataID: 1,
          DataType: 'Data1'
          },
          {
              DataID: 2,
              DataType: 'Data2'
          },
          {
              DataID: 3,
              DataType: 'Data3'
          },
          {
              DataID: 4,
              DataType: 'Data4'
          }
      ]
  
      ReactDOM.render(
          &lt;SelectionsExample
              options={data}
              preset={[data[1]]}
          /&gt;,
          document.getElementById('divExampleSelector')
      )
  });
  
  
  function SelectionsExample(props) {
      const [options, setOptions] = useState(props.options);
      const [preset, setPreset] = useState(props.preset);
  
      function handleSelect(s) {
          console.log((s ? s.DataType : 'Nothing') + ' selected');
      }
      function handlePreset() {
          let s = options[2];
          console.log('Preset', s);
          setPreset([s]);
      }
  
      return (
          &lt;&gt;
              &lt;Typeahead
              id=&quot;selections-example&quot;
              options={options}
              defaultSelected={preset ?? []}
              onChange={(s) =&gt; handleSelect(s[0])}
              labelKey=&quot;DataType&quot;
              clearButton
                  placeholder=&quot;Choose a value...&quot;
              /&gt;
              &lt;Button
                  onClick={handlePreset}
                  variant=&quot;outline-secondary&quot;&gt;Preset &lt;/Button&gt;
         &lt;/&gt;
      )
  }
  </code></pre>
  <p>On first render, all works fine with as expected the second item in my options list shown.</p>
  <p>But when I click the 'Preset' button, <code>handlePreset</code> runs but nothing changes in the control. I would have expected the selection to change to value of options[2].</p>
  <p>If I change the Typeahead prop 'defaultSelected' to 'selected', then the only item I can select is the one I pass in in the 'preset' prop.</p>
  <p>What am I doing wrong?</p>