histories slider after 100% video swipe

src/components/Histories.tsx

@@ -54,13 +54,15 @@ const Histories = () => {
   const [_document, setDocument] = useState<Document>();
 
   function handleOnLeftMove(): void {
-    if (offset < 0) {
+    if (selectedVideo > 0) {
+      setSelectedVideo((prev) => prev - 1);
       setOffset((prev) => prev + 1);
     }
   }
 
   function handleOnRightMove(): void {
-    if (offset > -2) {
+    if (selectedVideo < 2) {
+      setSelectedVideo((prev) => prev + 1);
       setOffset((prev) => prev - 1);
     }
   }
@@ -91,14 +93,6 @@ const Histories = () => {
     }
   }, [_document]);
 
-  useEffect(() => {
-    if (offset !== 0) {
-      setSelectedVideo(offset * -1);
-    } else {
-      setSelectedVideo(0);
-    }
-  }, [offset]);
-
   useEffect(() => {
     videoRefs.forEach((video, index) => {
       if (!video.current) return;
@@ -136,12 +130,13 @@ const Histories = () => {
   }, [selectedVideo, videoRefs]);
 
   useEffect(() => {
-    const _offset = offset;
     if (100 - 3 < videoProgress) {
-      if (_offset === -1 * videoRefs.length - 1) {
+      if (offset <= -1 * videoRefs.length + 1) {
         setOffset(0);
+        setSelectedVideo(0);
       } else {
         setOffset((prev) => prev - 1);
+        setSelectedVideo((prev) => prev + 1);
       }
     }
   }, [videoProgress]);
@@ -204,7 +199,7 @@ const Histories = () => {
               <div
                 className="flex gap-4 w-full h-full transition-all duration-300 ease-in-out 2xl:pl-10 xl:pl-8 sm:pl-3 xl:pb-10 sm:pb-[25px] "
                 style={{
-                  transform: `translateX(${offset * cardWidth}px)`,
+                  transform: `translateX(${-selectedVideo * cardWidth}px)`,
                 }}
               >
                 {videos.map((video, index) => (