Реагировать - Скрыть другие поповеры, когда один поповер открыт

Question

В ReactJS у меня есть компонент Popover, определенный следующим образом:

export class Popover extends React.Component<IProps, { isVisible?: boolean }>

Часть рендеринга выглядит так:

private renderPopover = () => {
        var actions = this.props.actions.filter(x => x.hide === false || x.hasOwnProperty("hide") === false);

        return <div className="popover schedule-item-row-menu">
            <ul className="nav nav-pills nav-stacked row-actions">
                {actions.map(x => {
                    return <li className="pointer" onClick={x.action}>{x.title}</li>;
                })}
            </ul>
        </div>;
    }

    render() {
        return <div className="inline-block">
                   <span ref={e => this.popoverElement = e} onClick={this.toggle}>{this.props.children}</span>
                   {this.state.isVisible && this.renderPopover()}
                </div>;

И toogle выглядит так:

private toggle = (e) => {
        var isVisible = !this.state.isVisible;


         if(isVisible) 
            document.addEventListener("click", this.toggle);
         else 
            document.removeEventListener("click", this.toggle);

        this.setState({ isVisible });

        e.stopPropagation();
    }

Popover используется так:

<div classname="outerDivName">
                    <Popover actions={this.props.actions}>
                        <div>here is the div that show the popover on click</div>
                    </Popover>
</div>

Всплывающее окно отображается, как и ожидалось, когда я щелкаю div, и оно скрывается, когда я щелкаю тот же div или фон страницы. Однако, и это моя проблема, если я щелкаю по другому div, у которого также есть всплывающее окно, первое всплывающее окно остается открытым, поэтому оба они открыты.

Как сделать так, чтобы первый исчез, а затем появился второй?