diff --git a/web/src/components/CameraControlPanel.jsx b/web/src/components/CameraControlPanel.jsx
index fe5b12a60..31be6b291 100644
--- a/web/src/components/CameraControlPanel.jsx
+++ b/web/src/components/CameraControlPanel.jsx
@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useState } from 'preact/hooks';
+import { useEffect, useCallback, useState } from 'preact/hooks';
 import useSWR from 'swr';
 import { usePtzCommand } from '../api/ws';
 import ActivityIndicator from './ActivityIndicator';
@@ -44,12 +44,8 @@ export default function CameraControlPanel({ camera = '' }) {
     sendPtz('STOP');
   };
 
-  if (!ptz) {
-    return <ActivityIndicator />;
-  }
-
-  document.addEventListener('keydown', (e) => {
-    if (!e) {
+  const keydownListener = useCallback((e) => {
+    if (!ptz || !e) {
       return;
     }
 
@@ -83,9 +79,9 @@ export default function CameraControlPanel({ camera = '' }) {
         }
       }
     }
-  });
+  }, [ptz]);
 
-  document.addEventListener('keyup', (e) => {
+  const keyupListener = useCallback((e) => {
     if (!e || e.repeat) {
       return;
     }
@@ -101,7 +97,20 @@ export default function CameraControlPanel({ camera = '' }) {
       e.preventDefault();
       onSetStop(e);
     }
-  });
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('keydown', keydownListener);
+    document.addEventListener('keyup', keyupListener);
+    return () => {
+      document.removeEventListener('keydown', keydownListener);
+      document.removeEventListener('keyup', keyupListener);
+    };
+  }, [keydownListener, keyupListener, ptz]);
+
+  if (!ptz) {
+    return <ActivityIndicator />;
+  }
 
   return (
     <div data-testid="control-panel" className="p-4 text-center sm:flex justify-start">