Fixed double execution of callback when options is passed

docs/useHotkeys.mdx

@@ -147,7 +147,7 @@ edits the field content.
         <div>
           {amount >= 0 ? 'Add' : 'Remove'} {Math.abs(amount)} dollars {amount >= 0 ? 'from' : 'to'} my bank account.
         </div>
-        <div contentEditable={true}>Edit this text.</div>
+        <div contentEditable={true} suppressContentEditableWarning={true}>Edit this text.</div>
       </>
     );
   }}
@@ -167,12 +167,26 @@ If you want to have hotkeys active while a user edits a tags contents you can pa
         <div>
           {amount >= 0 ? 'Add' : 'Remove'} {Math.abs(amount)} dollars {amount >= 0 ? 'from' : 'to'} my bank account.
         </div>
-        <div contentEditable={true}>Edit this text.</div>
+        <div contentEditable={true} suppressContentEditableWarning={true}>Edit this text.</div>
       </>
     );
   }}
 </Playground>
 
 ## Using arrow keys
 
-To use arrow keys,
+To use arrow keys, please use `left`, `right`, `up` and `down` as the identifiers for the arrows, like so:
+
+<Playground>
+  {() => {
+    const [amount, setAmount] = useState(0);
+    useHotkeys('shift-right', () => setAmount(prevAmount => prevAmount + 100), {splitKey: '-'});
+    return (
+      <>
+        <div>
+          Add {amount} dollars to my bank account.
+        </div>
+      </>
+    );
+  }}
+</Playground>

src/index.test.tsx

@@ -106,6 +106,10 @@ test('useHotkeys should use correctly assign options and deps argument when usin
   userEvent.keyboard('{Shift>}A{/Shift}');
 
   expect(callback).toHaveBeenCalledTimes(2);
+
+  userEvent.keyboard('{Shift>}A{/Shift}');
+
+  expect(callback).toHaveBeenCalledTimes(3);
 });
 
 test('useHotkeys should only trigger once if neither keyup nor keydown are set', () => {

src/useHotkeys.ts

@@ -46,6 +46,7 @@ export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler
     enabled = true,
     enableOnContentEditable = false,
   } = options as Options || {};
+
   const ref = useRef<T | null>(null);
 
   // The return value of this callback determines if the browsers default behavior is prevented.
@@ -82,8 +83,10 @@ export function useHotkeys<T extends Element>(keys: string, callback: KeyHandler
 
     hotkeys(keys, (options as Options) || {}, memoisedCallback);
 
-    return () => hotkeys.unbind(keys, memoisedCallback);
-  }, [memoisedCallback, options, keys, enabled]);
+    return () => {
+      hotkeys.unbind(keys, memoisedCallback)
+    };
+  }, [memoisedCallback, keys, enabled]);
 
   return ref;
 }