diff --git a/web/src/components/camera/DebugCameraImage.tsx b/web/src/components/camera/DebugCameraImage.tsx
index e7352c17a..34588aa06 100644
--- a/web/src/components/camera/DebugCameraImage.tsx
+++ b/web/src/components/camera/DebugCameraImage.tsx
@@ -22,7 +22,7 @@ export default function DebugCameraImage({
   cameraConfig,
 }: DebugCameraImageProps) {
   const [showSettings, setShowSettings] = useState(false);
-  const [options, setOptions] = usePersistence(
+  const [options, setOptions] = usePersistence<Options>(
     `${cameraConfig?.name}-feed`,
     emptyObject
   );
@@ -36,7 +36,7 @@ export default function DebugCameraImage({
   const searchParams = useMemo(
     () =>
       new URLSearchParams(
-        Object.keys(options).reduce((memo, key) => {
+        Object.keys(options || {}).reduce((memo, key) => {
           //@ts-ignore we know this is correct
           memo.push([key, options[key] === true ? "1" : "0"]);
           return memo;
@@ -68,7 +68,7 @@ export default function DebugCameraImage({
           <CardContent>
             <DebugSettings
               handleSetOption={handleSetOption}
-              options={options}
+              options={options || {}}
             />
           </CardContent>
         </Card>
diff --git a/web/src/hooks/use-persistence.ts b/web/src/hooks/use-persistence.ts
index 83f769c4a..4fed0a2c2 100644
--- a/web/src/hooks/use-persistence.ts
+++ b/web/src/hooks/use-persistence.ts
@@ -3,7 +3,7 @@ import { get as getData, set as setData } from "idb-keyval";
 
 type usePersistenceReturn<S extends any> = [
   value: S | undefined,
-  setValue: (value: string | boolean) => void,
+  setValue: (value: S) => void,
   loaded: boolean,
 ];
 
@@ -15,7 +15,7 @@ export function usePersistence<S>(
   const [loaded, setLoaded] = useState<boolean>(false);
 
   const setValue = useCallback(
-    (value: string | boolean) => {
+    (value: S) => {
       setInternalValue(value);
       async function update() {
         await setData(key, value);