another way of doing it with usecallback

contexts/audioContext.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { KeyCode } from "../globals/keycode";
 import MicRecorder from "mic-recorder-to-mp3";
@@ -151,18 +151,6 @@ export default function AudioContextProvider({ children }) {
       });
   }, [audioInputDeviceId]); // change it everytime we change the input device
 
-  // IMPORTANT: shortcut handlers need to be updated as the function has to have the fresh state
-  useEffect(() => {
-    console.log("updating event listeners");
-    document.addEventListener("keydown", handleKeyboardShortcut);
-    document.addEventListener("keyup", handleKeyUp);
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyboardShortcut);
-      document.removeEventListener("keyup", handleKeyUp);
-    };
-  }, [handleKeyboardShortcut, handleKeyUp]);
-
   // SECTION: recording
   async function startRecording() {
     Mp3Recorder.start()
@@ -202,7 +190,9 @@ export default function AudioContextProvider({ children }) {
   }
 
   // todo usecallback hook
-  function handleKeyUp(event) {
+
+  const handleKeyUp = useCallback(
+    (event) => {
       console.log("on key up");
 
       // if was recording and released R, then stop recording
@@ -216,9 +206,12 @@ export default function AudioContextProvider({ children }) {
 
         setSelectedTeamMember(null);
       }
-  }
+    },
+    [isRecording, selectedTeammate]
+  );
 
-  function handleKeyboardShortcut(event) {
+  const handleKeyboardShortcut = useCallback(
+    (event) => {
       if (event.repeat) {
         return;
       }
@@ -252,7 +245,27 @@ export default function AudioContextProvider({ children }) {
       }
 
       // todo if we press the same shortcut twice, deactive selected user
-  }
+    },
+    [
+      selectedTeammate,
+      audioInputDeviceId,
+      hasRecPermit,
+      isMuted,
+      teamShortcutMappings,
+    ]
+  );
+
+  // IMPORTANT: shortcut handlers need to be updated as the function has to have the fresh state
+  useEffect(() => {
+    console.log("updating event listeners");
+    document.addEventListener("keydown", handleKeyboardShortcut);
+    document.addEventListener("keyup", handleKeyUp);
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyboardShortcut);
+      document.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [handleKeyboardShortcut, handleKeyUp]);
 
   function addTeamShortcutBinding(keyCode: number, userId: string) {
     setTeamShortcutMappings((prevMap) => ({ ...prevMap, [keyCode]: userId }));