How to find out in the parent that the remote child component belonged to him?

Question

React

Good day everyone.
In the navbar there is an icon that opens dropdown on click. Dropdown, after opening, draws all the insides and sets the listener for clicks in its useEffect 'e. A click from the outside - we close the drop, a click inside - we are silent.
The insides of a drop are, for example, some kind of product cards. Each such card has the ability to self-destruct by clicking on the cross.
The problem is that after the card is removed, the entire drop is first redrawn (i.e. without the deleted element) and only at the very end the parent listener works, which, of course, collapses the drop, thinking that the click occurred from outside, because in fact, the element is no longer in the drop.
How to contrive and explain to the listener not to collapse the drop after removing the card?
The only thing that came to mind was to add the data-remove-icon attribute to the card removal icon and in the listener check for the presence of this property in event.target.dataset . I don't think this is the right way.
Recreated a similar disgrace here .
Thanks in advance.

Answer 1

The parent cannot be found, because the element is deleted before the click is processed, a lot of crutches come to mind to fix this, but I would suggest not writing bicycles, but using proven ready-made solutions like https://github.com/Pomax/ react-onclickoutside
Your code using the library:
https://codesandbox.io/embed/suspicious-grass-6h3m...