Describe the bug

If you attach the result of the hook useHotkeys to a different element than it was initially attached to, it breaks.

To Reproduce

Steps to reproduce the behavior:

1. Have code of the sorts const ref = useHotkeys(...); in your component.
2. Use the ref like this initially: <element1 ref={ref} />
3. Then based on a condition of some sort use the ref like this: <element2 ref={ref} />
4. The shortcuts stop working

I made a CodePen to illustrate this better.

Here's the gist of the demo:

It renders either or <textarea /> based on a button toggle. Supposedly a situation where you toggle between a multi-line and simple input situation. But it's purely an example.

When focus is inside any of the input tags (input or textarea) pressing Enter increments a counter. The value of the counter is rendered as well.

After you use the Toggle button (be it once or multiple times) the Enter key no longer increments the counter.

Expected behavior

When the ref is attached to a different instance the eventHandler should re-attach. => Call addEventHandler on the new instance. Of-course after clearing the old one. The old instance can stay in the DOM after all, though it does not in my example.

Environment:

• Desktop
• OS: All (I am on Mac OS Sonoma)
• Browser: All (I use Vivaldi)
• Browser version: All (6.5.3206.50 (Stable channel) (arm64))
• Package version: 4.4.3

Additional context

How to fix:

To fix this, the returned Ref will need to be a RefCallback<T> instead of MutableRefObject<T>.
By passing a RefCallback, your callback will be called by React every time the instance it's attached to changes.

I can and may submit a Pull-Request with a fix.