Unable to render Reactjs-boostrap popover - react-bootstrap

Question

I have the following package installed:
npm install --save react-bootstrap bootstrap
And I am trying to add a popover using an example provided here example.
This is the exact code:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';
function App() {
const popover = (
<Popover id="popover-basic">
<Popover.Title as="h3">Popover title</Popover.Title>
<Popover.Content>
Popover content <strong>some strong content</strong> Normal content again
</Popover.Content>
</Popover>
);
return (
<div className="App">
<OverlayTrigger trigger="click" placement="right" overlay={popover}>
<Button variant="success">Click to trigger popover</Button>
</OverlayTrigger>
</div>
);
}
export default App;
But it just doesn't work. I don't see any errors in the console. And the popover does not render at all. What am I missing?

Answer 1

Probably you just need npm install react-bootstrap bootstrap. That is mentioned on the doc you suggested too.
From this Article,
Before npm 5.0.0, it was necessary to add --save after package name because it
will save the installed package to package.json file in the dependency section.
If you are using a recent version of npm save yourself from unnecessary typing
and use npm install [Package Name] instead of npm install [Package Name] --save
by default it will add the installed package to the dependency list in the
package.json file.