Cannot close my component when clicking anywhere outside

I´m trying to fix an issue with a component whenever I click outside it´s window, it works as expected, except when I click on buttons from other components which have their own functionallity.

 onClickOutside = (e) => {
    const $container = $(`#${escapeDots(this.id)}`);
    if (this.isEventOutsideElement($container, e)) {
      this.onCloseComponent();
    }
    if (e) {
      e.stopPropagation();
    }
  }

This code manages the event when a click is outside my component which then closes it here

componentWillUnmount() {
    document.removeEventListener('click', this.onClickOutside);
    document.removeEventListener('touchstart', this.onTouchOutside, true);
  }

The issue I´m getting is here, where “element” is empty when I click on the buttons I mentioned, but when I click elsewhere it gets a div with length 1

isEventOutsideElement(element, event) {
    return element.length && !element.is(event.target) && element.has(event.target).length === 0;
  }

I´m not sure how can I make this component recognize those buttons so it closes before doing the actions built into the buttons.

I tried to implement a close action on the component where the other buttons are located but didn´t work