Как установить ref для дочернего компонента с помощью условного рендеринга?

Question

Я хочу иметь всплывающий компонент, который отображается, когда я щелкаю событие в календаре, но должен исчезать, когда я щелкаю за его пределами.

У меня есть компонент CalendarPopup, который условно визуализируется на основе реквизитов.Это работает, когда я делаю всплывающее окно видимым для первого, но позже оно не отображается.

При проверке DOM я вижу <div class="NaN hideClass" id="popupDIV">

export class CalendarPopup extends Component {
    render() {
        if (!!!this.props.isPopoverVisible) {
            return null;
        }
        return (
            <div className='popup_container' id="popupDIV" ref={this.props.setPopupRef}>
            </div>
export default CalendarPopup;

class CalendarContainer extends Component {
  state = {
    isPopoverVisible: false,
    isEventSelected: false,
  };

  onEventSelected = (id) => {
    this.setStateProperty('isEventSelected', true);
    this.setStateProperty('isPopoverVisible', true);
    // logic
    this.setStateProperty('isEventSelected', false);
  }

  setPopupRef = (node) => {
    this.popupRef = node
  }

  handleClick = () => {
    if (!this.props.isPopoverVisible) {
      document.addEventListener('click', this.handleOutsideClick, false);
    } else {
      document.removeEventListener('click', this.handleOutsideClick, false);
    }

    this.setStateProperty('isPopupVisible', false);
  }

  handleOutsideClick = (e) => {
    console.log(this.popupRef);
    if (this.state.isEventSelected || !!!this.state.isPopoverVisible || this.popupRef.contains(e.target)) {
      return;
    }

    this.handleClick();
  }

  setStateProperty = (property, value) => {
    this.setState({
      [property]: value,
    });
  }

  render() {
    return (
      <div onClick={this.handleOutsideClick}>
        <CalendarComponent onEventSelected={(id) => this.onEventSelected(id)}/>
        <CalendarPopup setPopupRef = { this.setPopupRef } isPopoverVisible={this.state.isPopoverVisible}/>
      </div>
    );
  }
}

Я ожидаю, что всплывающее окно будетснова отображается, когда я выбираю другое событие в календаре