How to make clicking some elements an exception for useClickAway hook

[kansalanmol0609]

What is the current behavior?

I have an Overlay which is opened by clicking an icon button. In that Overlay, I'm using the useClickAway hook exported by the react-use library -

useClickAway(overlayRef, hideOverlay);

Basically, whenever a user clicks anywhere outside the overlay dom node, it hides this overlay.

But with this, I'm facing one issue when a user clicks on that button (which opens this overlay), this overlay first closes and then re-opens, which causes the flickering of the overlay.

How can I make clicking on this button an exception for this useClickAway hook?

I have tried adding event.stopPropagation to click the event handler on the button but it didn't work.

Codesandbox Link for same - https://codesandbox.io/s/useclickaway-hook-krd6y6

What is the expected behavior?

It should not close the overlay on clicking button

A little about versions:

• OS: MacOS
• Browser (vendor and version): Chrome V115
• React: 18.2.0
• react-use: 17.4.0
• Did this worked in the previous package version? Not sure