title: react-bootstrap how to use custom form control component
body: <p>I need to add select input in my form, but there are too many options, so the default way to do it looks really ugly(</p>
  
  <pre><code>&lt;Form.Control as="select"&gt;
      {props.options.map(
          (o) =&gt; &lt;option&gt;{o}&lt;/option&gt;
      )}
  &lt;/Form.Control&gt;
  </code></pre>
  
  <p>So I've decided to use <code>react-bootstrap-typeahead</code> because it's already being used in my project and it supports search. However, it didn't work properly in that case.</p>
  
  <pre><code>&lt;Form&gt;
      &lt;Form.Group&gt;
          &lt;Form.Label&gt;Provider&lt;/Form.Label&gt;
          &lt;Form.Control
              as={Typeahead}
              id="id"
              options={props.options}
           /&gt;
      &lt;/Form.Group&gt;
  &lt;/Form&gt;
  </code></pre>
  
  <p>It looks like this: 
  <a href="https://i.stack.imgur.com/X3S7w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X3S7w.png" alt="enter image description here"></a></p>
  
  <p>Might I've done it not properly, but I can't figure out how to do it in another way( </p>