diff --git a/src/components/LatestCodeList.astro b/src/components/LatestCodeList.astro
index 887d1d6..e43df28 100644
--- a/src/components/LatestCodeList.astro
+++ b/src/components/LatestCodeList.astro
@@ -120,7 +120,6 @@ h5 {
 </div>
 <script>
 import { isPaused, scrollLeft } from "$state/index";
-import { animate, scroll } from "framer-motion/dom";
 
 const onLoad = () => {
   const codesContainer = document.querySelector(
diff --git a/src/components/LatestCodeScroller.tsx b/src/components/LatestCodeScroller.tsx
index c4156dc..c9403b0 100644
--- a/src/components/LatestCodeScroller.tsx
+++ b/src/components/LatestCodeScroller.tsx
@@ -8,10 +8,11 @@ const LatestCodeScroller: FC = () => {
   const [scope, animate] = useAnimate();
 
   useEffect(() => {
+    // @ts-ignore
     scope.current = document.querySelector(
       ".codes-container",
     ) as HTMLDivElement;
-  }, []);
+  }, [scope]);
 
   useEffect(() => {
     if (!scope.current) return;
@@ -21,7 +22,7 @@ const LatestCodeScroller: FC = () => {
         scope.current.scrollTo({ left });
       },
     });
-  }, [scrollLeftValue]);
+  }, [scope, animate, scrollLeftValue]);
 
   return null;
 };