Реагируйте, как закрыть всплывающее окно с модальным

С react-bootstrap у меня есть всплывающее окно, содержащее список. При нажатии на один из элементов списка открывается модальное окно.

Как закрыть всплывающее окно при открытии модального окна?

Я попытался:

• rootClose но это не работает

• React Bootstrap - как вручную закрыть OverlayTrigger, который закрывает оба, всплывающее окно и модальное окно

  class TypeColumn extends React.Component {
  constructor(props, context) {
      super(props, context);
      this.close = this.close.bind(this);
  }
  
  close() {
      this.refs.overlay.hide();
  }
  
  render() {
      const popoverClick = (
          <Popover id="popover-trigger-click-root-close">
              <ul>
                  <NumberOptions onClick={this.close} />
              </ul>
          </Popover>
      );
  
      return (
          <OverlayTrigger
              show={show}
              trigger="click"
              placement="bottom"
              overlay={popoverClick}
              ref="overlay"
          >
              <i
                  className={columnTypeIcon} aria-hidden="true"
              />
          </OverlayTrigger>
      );
  }
  }
  
  class NumberOptions extends React.Component {
  constructor(props) {
      super(props);
      this.open = this.open.bind(this);
  
      this.state = {
          showModal: false,
      };
  }
  
  open() {
      this.setState({ showModal: true });
      this.props.onClick();
  }
  
  render() {
      return (
          <div>
              <li
                  data-value={DATA_TYPES.NUMBER}
                  onClick={this.open}
              >
                  Options nombre
              </li>
  
              <Modal
                show={showModal}
                dialogClassName={styles.customModal}
              >
              ...
              </Modal>
          </div>
      );
  }
  }