diff --git a/src/reanimated2/hook/useScrollViewOffset.ts b/src/reanimated2/hook/useScrollViewOffset.ts
index 2d5d4f60391a..dd9de11e6b63 100644
--- a/src/reanimated2/hook/useScrollViewOffset.ts
+++ b/src/reanimated2/hook/useScrollViewOffset.ts
@@ -23,10 +23,10 @@ const IS_WEB = isWeb();
  * @see https://docs.swmansion.com/react-native-reanimated/docs/scroll/useScrollViewOffset
  */
 export const useScrollViewOffset = IS_WEB
-  ? useScrollViewOffsetJS
+  ? useScrollViewOffsetWeb
   : useScrollViewOffsetNative;
 
-function useScrollViewOffsetJS(
+function useScrollViewOffsetWeb(
   animatedRef: AnimatedRef<AnimatedScrollView>,
   initialRef?: SharedValue<number>
 ): SharedValue<number> {
@@ -85,6 +85,7 @@ function useScrollViewOffsetNative(
     // eslint-disable-next-line react-hooks/rules-of-hooks
     initialRef !== undefined ? initialRef : useSharedValue(0)
   );
+  const scrollRef = useRef<AnimatedScrollView | null>(null);
 
   const eventHandler = useEvent<RNNativeScrollEvent>(
     (event: ReanimatedScrollEvent) => {
@@ -100,13 +101,17 @@ function useScrollViewOffsetNative(
   ) as unknown as EventHandlerInternal<ReanimatedScrollEvent>;
 
   useEffect(() => {
-    const component = animatedRef.current;
-    const viewTag = IS_WEB ? component : findNodeHandle(component);
+    // We need to make sure that listener for old animatedRef value is removed
+    if (scrollRef.current !== null) {
+      eventHandler.workletEventHandler.unregisterFromEvents();
+    }
+    scrollRef.current = animatedRef.current;
 
+    const component = animatedRef.current;
+    const viewTag = findNodeHandle(component);
     eventHandler.workletEventHandler.registerForEvents(viewTag as number);
-
     return () => {
-      eventHandler.workletEventHandler?.unregisterFromEvents();
+      eventHandler.workletEventHandler.unregisterFromEvents();
     };
     // React here has a problem with `animatedRef.current` since a Ref .current
     // field shouldn't be used as a dependency. However, in this case we have