Add popover when event is clicked in react-big calendar mode?

I am having trouble adding a popover to an event when it is clicked. The popover seems to only appear on the event slot, not over the event slot. Also, since I created a custom component for events and tried to implement the popover in the custom component, the popover only appears every time the event name is clicked.

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={{zIndex:10000}}>
          <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 the calendar, prop components={{event:CustomEvent}}

. Any help would be greatly appreciated; thank!