reactjs - 折りたたみパネルを機能させるにはどうすればよいですか?

Question

私はreactbootstrapを使用しており、このコードペンを作成して機能させようとしましたが、うまくいきませんでした。これは、開閉することになっているパネルです。

import { Button } from 'react-bootstrap';
import { Panel } from 'react-bootstrap';
import { Fade} from 'react-bootstrap';
import { Collapse } from 'react-bootstrap';
    class App extends React.Component {
      constructor() {
        super();
        this.state = {};
      }

      render() {
        return (
          <div>
            <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
              click
            </Button>
            <Collapse in={this.state.open}>
              <div>
                <Well>
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
                  Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </Well>
              </div>
            </Collapse>
          </div>
        );
      }

    };

これはcodepen です。コンソールにエラーは表示されないので、何が起こっているのかわかりません。