كيف أضيف كومبونانت بين صفحات القرآن الكريم في أطار React native

السلام عليكم, أنا جالس أعمل تطبيق للقرآن الكريم في أطار Expo من react native بلغة typescript. وحاليا انا أواجه مشكلة تداخل السور في بعضها البعض لأني جالس استخدم دالة reduce لربط الآيات الكريمة في بعضها البعض ولكن أيضا يتم ربط آيات السور الاخرى اذا كانت بنفس الصفحة, فانا حاب اعمل component يظهر في حال انتهت السورة وبدأت السورة الاخرى بنفس الصفحة مثل القرآن الكريم -- على سبيل المثال في نهاية سورة النساء وبداية سورة المائدة أريد أظهر  الcomponent في المنتصف مثل القران الكريم. أتمنى أني أكون شرحت المطلوب بشكل جيد

import {
  View,
  Text,
  Dimensions,
  StyleSheet,
  TouchableHighlight,
} from "react-native";
import React, { useCallback, useEffect, useRef } from "react";
import { FlashList, ViewToken } from "@shopify/flash-list";
import hafs from "../../assets/json/hafs.json";

interface Verse {
  id: number;
  jozz: number;
  sura_no: number;
  sura_name_en: string;
  sura_name_ar: string;
  page: number;
  line_start: number;
  line_end: number;
  aya_no: number;
  aya_text: string;
  aya_text_emlaey: string;
}

type StateFunctionsFromParent = {
  CurrentSuraName: (sura: string) => void;
  CurrentJozz: (jozz: number) => void;
};



const Separator = ({ suraName }: { suraName: string }) => (
  <View
    style={{
      backgroundColor: "lightgray",
      padding: 10,
      alignItems: "center",
      marginVertical: 10,
    }}
  >
    <Text style={{ fontWeight: "bold", fontSize: 16 }}>{suraName}</Text>
  </View>
);

export default function QuranList({
  CurrentSuraName,
  CurrentJozz,
}: StateFunctionsFromParent) {
  const groupedHafs: Record<number, Verse[]> = hafs.reduce(
    (acc: Record<number, Verse[]>, verse) => {
      const { page } = verse;

      if (!acc[page]) {
        acc[page] = [];
      }

      acc[page].push(verse);
      return acc;
    },
    {}
  );
 
  useEffect(() => {
    const initialPage = Object.values(groupedHafs)[0];
    if (initialPage) {
      CurrentSuraName(initialPage[0]?.sura_name_ar || "");
      CurrentJozz(initialPage[0]?.jozz || 0);
    }
  }, []);
  const handleViewableItemsChanged = useCallback(
    ({ viewableItems }: { viewableItems: ViewToken[] }) => {
      if (viewableItems.length > 0) {
        const firstVisibleItem = viewableItems[0];
        const suraNameAr = firstVisibleItem.item[0]?.sura_name_ar;
        const jozz = firstVisibleItem.item[0]?.jozz;
        CurrentSuraName(suraNameAr || "");
        CurrentJozz(jozz || 0);
      }
    },
    []
  );
 
  const viewabilityConfig = useRef({
    itemVisiblePercentThreshold: 50,
  });

  return (
    <FlashList
       data={Object.values(groupedHafs)}
      keyExtractor={(item, index)=> index.toString()}
      horizontal={true}
      estimatedItemSize={Dimensions.get("window").width}
      pagingEnabled={true}
      inverted
      alwaysBounceHorizontal
      viewabilityConfig={viewabilityConfig.current}
      showsHorizontalScrollIndicator={false}
      onViewableItemsChanged={handleViewableItemsChanged}
      renderItem={({ item, index }) => {
        const combinedText = item.reduce(
          (acc, verse, id) => acc + " " + verse.aya_text,
          ""
        );
        combinedText.match(item[0].id.toString());
        return (
          <View
            style={{
              width: Dimensions.get("window").width,
              height: Dimensions.get("window").height,
              backgroundColor: "#f0ebdd",
              elevation: 9,
            }}
            key={item[0].id}
          >
            <View
              style={{
                flex: 1,
                padding: 5,
                margin: 10,
              }}
            >
              <Text style={[styles.ayaStyle]}>{combinedText}</Text>
              <Text style={{ textAlign: "center" }}>{index + 1}</Text>
            </View>
          </View>
        );
      }}
    />
  );
}
const styles = StyleSheet.create({
  ayaStyle: {
    fontFamily: "HafsSmart",
    fontSize: 18,
    marginHorizontal: 20,
  },
});

شكرا لكم

هذه صورة من المشكلة