diff --git a/src/components/StoryDetail/hook.tsx b/src/components/StoryDetail/hook.tsx
index dff7e02..9d4b3fb 100644
--- a/src/components/StoryDetail/hook.tsx
+++ b/src/components/StoryDetail/hook.tsx
@@ -1,21 +1,19 @@
-import React, { MutableRefObject, useRef } from 'react';
-import type Carousel from 'react-native-snap-carousel';
+import React from 'react';
 
 import { useTrackRaf } from '../../hooks/useTrackRaf';
 
-import type { StoryDetailProps } from '../../types';
+import type { StoryDetailProps, CarouselRef } from '../../types';
 
 import { StoryDetailItem } from '../StoryDetailItem';
 
 export const useStoryDetail = ({
   initial,
   stories,
+  carouselRef,
   onBackPress,
   StoryDetailItemHeader,
   StoryDetailItemFooter,
-}: StoryDetailProps) => {
-  const carouselRef: MutableRefObject<Carousel<any> | null> = useRef(null);
-
+}: StoryDetailProps & { carouselRef: CarouselRef }) => {
   const { trackRaf } = useTrackRaf();
 
   const onBackDropPress = () => onBackPress(initial);
@@ -35,7 +33,7 @@ export const useStoryDetail = ({
   const onVideoEnd = (idx) => {
     if (idx <= stories.length - 2) {
       trackRaf(() => {
-        carouselRef.current?.snapToItem(idx + 1, false, false);
+        carouselRef.current?.snapToItem(idx + 1, false, true);
       });
     } else {
       onBackPress(idx);
diff --git a/src/components/StoryDetail/index.tsx b/src/components/StoryDetail/index.tsx
index a0a8f81..7bd9561 100644
--- a/src/components/StoryDetail/index.tsx
+++ b/src/components/StoryDetail/index.tsx
@@ -36,16 +36,17 @@ export const StoryDetail = React.forwardRef<
     },
     ref
   ) => {
+    const carouselRef: any = useRef(null);
+
     const { onBackDropPress, renderStoryDetailItem } = useStoryDetail({
       initial,
       stories,
+      carouselRef,
       onBackPress,
       StoryDetailItemHeader,
       StoryDetailItemFooter,
     } as any);
 
-    const carouselRef: any = useRef(null);
-
     return (
       <StoryDetailExpander ref={ref} isVisible={animated}>
         <Overlay
diff --git a/src/components/StoryDetailItem/hook.tsx b/src/components/StoryDetailItem/hook.tsx
index ac8033c..86c4568 100644
--- a/src/components/StoryDetailItem/hook.tsx
+++ b/src/components/StoryDetailItem/hook.tsx
@@ -26,7 +26,7 @@ export const useStoryDetailItem = ({
     } else {
       setPaused(true);
       setProgress(0);
-      videoRef.current?.seek(0);
+      setTimeout(() => videoRef.current?.seek(0), 0);
     }
   }, [isCurrentStory, videoRef]);
 
diff --git a/src/hooks/useTrackRaf.ts b/src/hooks/useTrackRaf.ts
index 97e130c..81b3acd 100644
--- a/src/hooks/useTrackRaf.ts
+++ b/src/hooks/useTrackRaf.ts
@@ -11,8 +11,6 @@ export const useTrackRaf = () => {
         cancelAnimationFrame(intervalId);
       });
     };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const trackRaf = (callback: (time: number) => void) => {
diff --git a/src/types/index.ts b/src/types/index.ts
index be8e866..cdccfb1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -267,6 +267,16 @@ export type StoryDetailExpanderRefProps = {
 
 export type StoryDetailExpanderRef = MutableRefObject<StoryDetailExpanderRefProps | null>;
 
+export type CarouselRefProps = {
+  /**
+   * A callback to fire expand-on-click animation
+   */
+  current?: object;
+  snapToItem: (index: number, animated: boolean, fireCallback: boolean) => void;
+};
+
+export type CarouselRef = MutableRefObject<CarouselRefProps | null>;
+
 export type RenderStoryDetailItemProps = {
   /**
    * The story content