clean modal locking process as it was dirty

packages/example/src/components/modals/SubtitlesModal.tsx

@@ -5,6 +5,7 @@ import { useLockSpatialNavigation } from '../../../../lib/src/spatial-navigation
 import { Button } from '../../design-system/components/Button';
 import { Spacer } from '../../design-system/components/Spacer';
 import { GenericModal } from './GenericModal';
+import { useIsFirstRender } from '../../hooks/useIsFirstRender';
 
 interface SubtitlesModalProps {
   isModalVisible: boolean;
@@ -18,17 +19,18 @@ export const SubtitlesModal = ({
   setSubtitles,
 }: SubtitlesModalProps) => {
   const { lock, unlock } = useLockSpatialNavigation();
+  const isFirstRender = useIsFirstRender();
 
   // Locks the parent navigator when the modal is open and unlocks it when it's closed
   useEffect(() => {
-    return () => {
+    if (!isFirstRender) {
       if (isModalVisible) {
         lock();
       } else {
         unlock();
       }
-    };
-  }, [isModalVisible, lock, unlock]);
+    }
+  }, [isModalVisible, lock, unlock, isFirstRender]);
 
   return (
     <SpatialNavigationRoot>

packages/example/src/hooks/useIsFirstRender.tsx

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export const useIsFirstRender = () => {
+  const isFirstRenderRef = useRef(true);
+  useEffect(() => {
+    isFirstRenderRef.current = false;
+  }, []);
+  return isFirstRenderRef.current;
+};