React Native Video is automaticly buffers when navigated to another page

Question

I am using react native video and react navigagtion and I am trying to display gallery of videos on a loop just like Instagram reels that you see on their home page. When I am on the home page, videos are displayed on a loop just fine but when I navigate to another page, I get console log messages of my videos are still being buffered and causes perfomance issues. Do you have any idea why this is happening?

Here is how I display my videos:

<FlatList
            data={videoData}
            horizontal
            showsHorizontalScrollIndicator={false}
            decelerationRate="fast"
            snapToInterval={width - 84}
            keyExtractor={(i) => i.id}
            renderItem={({ item, index }) => (
              <TouchableWithoutFeedback
                onPressIn={() => onPressInReel(index)}
                onPressOut={() => onPressOutReel(index)}
                onPress={() => setReelsOpen(true)}
              >
                <Animated.View
                  className=" w-28 h-48  rounded-xl px-2"
                  style={{
                    transform: [{ scale: animatedScalesReels[index] || 1 }],
                  }}
                >
                  <SingleReelHome item={item}></SingleReelHome>
                </Animated.View>
              </TouchableWithoutFeedback>
            )}
          />

And here is the single reel home component:

import React, { useCallback, useRef, useState } from "react";
import { View} from "react-native";
import Video from "react-native-video";
import { useFocusEffect } from "@react-navigation/native";

const SingleReelHome = ({ item }) => {
  const [paused, setPaused] = useState(true);

  const videoRef = useRef(null);

  const [onLoad, setOnLoad] = useState(false);

  const onBuffer = (buffer) => {
    console.log("Home Page reels are buffering:", buffer);
  };
  const onError = (error) => {
    console.log("error", error);
  };

  useFocusEffect(
    useCallback(() => {
      setPaused(false); // Resume on focus

      return () => setPaused(true); // Pause on blur
    }, [])
  );

  return (
    <>
      {onLoad && <View className=" w-full h-full rounded-[12px]"></View>}
      <Video
        videoRef={videoRef}
        onBuffer={onBuffer}
        onError={onError}
        onLoadStart={() => setOnLoad(true)}
        onEnd={() => setOnLoad(false)}
        repeat={true}
        paused={paused}
        resizeMode="cover"
        source={item.video}
        muted={true}
        style={{
          width: "100%",
          height: "100%",
          position: "absolute",
          borderRadius: 12,
        }}
      />
    </>
  );
};

export default SingleReelHome;

I tried the useFocusEffect to work around this but doesnt seem to fix the issue. When I navigate to another page, I get these buffer console messages repeatedly:

 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 305}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 289}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 259}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 275}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 275}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 305}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 259}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 289}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 275}
 LOG  Home Page reels are buffering: {"isBuffering": true, "target": 305}
 LOG  Home Page reels are buffering: {"isBuffering": true, "target": 275}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 305}
 LOG  Home Page reels are buffering: {"isBuffering": true, "target": 289}
 LOG  Home Page reels are buffering: {"isBuffering": true, "target": 259}
 LOG  Home Page reels are buffering: {"isBuffering": false, "target": 275}