Can't stop propagation with useClickAway

[kttmv]

I have a SideMenu component, that should be closed when clicking outside of it, and a NavBar component with a button that toggles the SideMenu. When the SideMenu is open and I click the toggle button, two actions are dispatched: sideMenuClosed and sideMenuToggled. Basically, the SideMenu first closes and then immediately re-opens.

I've tried doing this, but it didn't help:

const ref = useClickAway((e) => {
    e.stopPropagation()
    e.stopImmediatePropagation()
    dispatch(sideMenuClosed())
})

[tylermcginnis]

Any chance you can make a simple replication of it for me with Codesandbox?

[kttmv]

Here's the replication

[KevinArce98]

is there any solution for this issue?