React-BootstrapのForm.Selectが使えなかった

はじめに

React/typescriptど素人が書いております。

開発環境

VS Code 1.61.2
React 17.0.2
TypeScript 4.4.3
React-Bootstrap 1.6.4

問題

公式ドキュメントにあった下記コードをコピペで使用しようとしたところ、
Form.selectが使えなかった。

// import Form from 'react-bootstrap/Form'
<Form.Select aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</Form.Select>

対応

<Form.Control as="select">...</Form.Control>

こちらに書き換えたところ、エラーが消えました。

原因

とても初歩的なミスでしたが、React-Bootstrap 1.6.4を使っているのにドキュメントは
v2.0.0を参照しておりました。

ドキュメントv1.6.4を参照したところ、Form.Control as="select"になっていました。

<Form>
  <Form.Group controlId="exampleForm.SelectCustom">
    <Form.Label>Custom select</Form.Label>
    <Form.Control as="select" custom>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </Form.Control>
  </Form.Group>
</Form>

React-Bootstrapインストール時にバージョン指定をしてなく、最新版がインストールされていると思い込んでいたのが問題でした。

参考