How to hide a react-boostrap overlay (popover) when a modal opens?

Question

I have a react-boostrap popover that contains a menu inside and opens a Link (react-router Link) which is contained in a react-boostrap modal.

The problem is that while the modal is opened, the popover doesn't close itself. How do I get it to close itself after I've clicked on the link?

Right now the popover is on top of the modal.

Here is my code:

    render() {

    const { uname } = this.props;

        const popover = (
            <Popover id="popover" title={uname}>
                <ul>
                    <li><Link to={'/user/' + uname}>User</Link></li>
                    <li><Link to={{ pathname: '/add', query: { uname: uname } }}>Add Friend</Link></li>
                    <li>Block</li>
                </ul>
            </Popover>
        );


    return (
            <OverlayTrigger trigger="click"
                                            rootClose={true}
                                            placement='right'
                                            overlay={popover}
                                            key={uname}>
                {this.props.children}
            </OverlayTrigger>
        )
    }

}