ReactJs Collapse toglles-off after being opened

I'm trying to perform a collapsible element on my form. I am using react-bootstrap.

The behaviour I expect is the following: once I click the button "click", comes the content placed in <Collapse /> and stays until I click the same button again.

The behaviour I've got: once I click the button "click", a collapsed element appears and then vanishes.

I've just copied the code from the documentation of react-bootstrap Collapse example (https://react-bootstrap.github.io/utilities/transitions/). The example on their website works just fine. As I've noticed the styles, that are set to both examples (on my machine, and from the docs) are the same. So, why such happens and how to fix it?

Index.cshtml

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="~/dist/bundle.css" />
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand fixed-top dev">
        <div>Character bio</div>
      </nav>
    </header>

    <main role="main" class="container mt-5">

      <div id="content" class="row text-center mt-5">

      </div>

      <div class="row text-center mt-5 mb-3">
        <div class="col">
          <p className="text-muted">© 2018</p>
        </div>
      </div>
    </main>

    <script src="~/dist/bundle.js"></script>
  </body>
</html>

app.jsx

import "bootstrap/dist/css/bootstrap.min.css";
import "../css/common.css";

import { library } from "@fortawesome/fontawesome-svg-core";
import { faDice } from "@fortawesome/free-solid-svg-icons";
import { faHighlighter } from "@fortawesome/free-solid-svg-icons";

import React from "react";
import ReactDOM from "react-dom";
import Routes from "./routing/routes.jsx";
import { BrowserRouter, Link } from "react-router-dom";

import { Button, Collapse, Well } from "react-bootstrap";


library.add(
  faDice,
  faHighlighter
);

class Example extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      open: false
    };
  }

  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>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("content")
)

module.hot.accept();

the gif of what happening: https://dropmefiles.com/C7NPU (sorry for link, gif is bigger than 2 Mb)

P.S. I've googled the problem and found nothing (i.e. links from stackoverflow are not working).

Solution

After a night and with a fresh mind, I realised (just accurately re-read the doc) that I ought to use Bootstrap v3, not v4 (which I want to use). The thing is, that v4 somehow has no .collpase.in class. The quick fix of that is to add this class with display: block. Now it's working just well.