add popover when event is clicked in react-big-calendar?

i'm having trouble adding a popover to an event when it is clicked. the popover seems to show up only in the event slot, not on top of the event slot. additionally, since i created a custom component for the events and tried to implement the popover in the custom component, the popover only shows up whenever i click the name of the event.

Here is the code:

class CustomEvent extends React.Component {
    constructor(props){
        super(props)
    }


    render(){
      console.log(this.props);

      let popoverClickRootClose = (
        <Popover id="popover-trigger-click-root-close" style=>
          <strong>Holy guacamole!</strong> Check this info.
        </Popover>
      );

        return (
          <div>
            <OverlayTrigger id="help" trigger="click" rootClose container={this} placement="bottom" overlay={popoverClickRootClose}>
              <div>{this.props.event.title}</div>
            </OverlayTrigger>

          </div>
        );
    }
}

where in calendar, the prop components=. Any help would be appreciated; thanks!

from add popover when event is clicked in react-big-calendar?