问：触发Popover似乎会破坏下拉组件

EN

const OverlayTrigger = ReactBootstrap.OverlayTrigger;
const Popover = ReactBootstrap.Popover;
const DropdownButton = ReactBootstrap.DropdownButton;
const Dropdown = ReactBootstrap.Dropdown;

class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className="d-flex w-50 justify-content-around">
          <OverlayTrigger
            trigger="hover"
            placement="right"
            overlay={
              <Popover id="popover-basic">
                <Popover.Title as="h3">Popover</Popover.Title>
                <Popover.Content>My Popover</Popover.Content>
              </Popover>
            }
          >
            <Button>Hover Over Me First</Button>
          </OverlayTrigger>

          <DropdownButton title="Then, Click Me Second">
            <Dropdown.Item href="#/action-1">This</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Overlay</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Won't</Dropdown.Item>
            <Dropdown.Item href="#/action-2">Apper</Dropdown.Item>
            <Dropdown.Item href="#/action-3">After</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Clicking</Dropdown.Item>
            <Dropdown.Item href="#/action-3">Popover</Dropdown.Item>
          </DropdownButton>
        </div>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));