Disable global shortcuts / shortcuts from parent components about reakeys

[LoganDark]

Now, I can use stopPropagation correctly and the keybinds all still work - but callback is called twice with every keypress. What?

This was a combination of two things:

• I forgot to use useCallback in a parent component, causing the hotkeys to get regenerated every render.
• All the hotkeys were hidden, and as a shortcut I used the same name, but for some reason that caused useHotkeys to stop functioning correctly, in the same manner that React needs unique keys on components in a list. The hotkeys wouldn't be unregistered properly, causing duplicate hotkeys to exist with even more of the same name, amplifying the issue.

In the end I was able to fix this. The full solution to suppressing outside keybinds:

1. Make sure ref is an object with a current property.
2. Add your own keydown handler to the element that calls stopPropagation on every event.
3. Use a focus trap and make the entire element focusable via tabIndex={0} to keep the Mousetrap and stopPropagation functional

[LoganDark]

Okay, so it looks like this is a bit of user error - ref only works if it is passed an object with a current field... which means I have to do this

	const [menu, setMenu] = useState<HTMLDivElement | null>(null)
	const menuRef = useMemo(() => ({current: menu}), [menu])

since I have a useEffect that depends on menu.

Now, I can use stopPropagation correctly and the keybinds all still work - but callback is called twice with every keypress. What?