How to adjust throttle/debounce in this case?

Question

JavaScript

Made an example - https://codesandbox.io/s/r551o8q45m
Throttle/debounce I use to make UX more pleasant. For example: if the user just accidentally hovers the mouse over the link, I don't want to show him the popup right away, only if he lingers over the link (as in Wikipedia on window links). And when the mouse is removed, I don't want to instantly remove the window, and show it for half a second.
For each individual link, everything works OK.
The problem arises in this scenario: if you move the mouse over the link 111 >> wait for the popup >> quickly move the mouse to the link 222 >> wait for the popup >> sharply move to the link 333 >> wait for the popup , then when you move the mouse away, only the last popup closes!
I tried all options throttle/debounce, leading/trailing, tried to hang an additional flag on mouseover, nothing works. One breaks, then another.
How to decide?

Answer 1

The problem is that the popup method - you have one for all instances of the component. Hence the impossibility of closing popups immediately after opening - the method is simply not called, the timeout has not yet ended.
In order for it to work the way you want , popup in each individual instance must be a unique function, i.e. it has no place in methods.