Reanimated Carousel blocks navigation gesture

I have a screen that uses reanimated carousel the screen uses material top tab navigation which reqires me to swipe to go to the next screen but the Carousel blocks that
here is the code

<Carousel
        loop={false}
        width={width}
        height={height - 200}
        autoPlay={false}
        vertical
        data={[image, ...images]}
        scrollAnimationDuration={10}
        onSnapToItem={(index) => {
          setCurrentIndex(index);
          if (index > 0) {
            setTimeout(() => {
              setOverlayVisible((prev) => {
                const newVisibility = [...prev];
                newVisibility[index] = false;
                return newVisibility;
              });
            }, 5000);
          }
        }}
        renderItem={({ item: img, index }) => (
          <View style={{ flex: 1 }} key={index}>
            <Image
              source={{ uri: img }}
              style={{
                width,
                height: "100%",
                flex: 1,
                paddingTop: 20,
              }}
              resizeMode="contain"
            />
            <Bubble
              onClick={() => refRBSheet.current[2].open()}
              imageIndex={index === 0 ? -1 : index - 1}
            />
            <CommentOverlay
              visible={index !== 0 && overlayVisible[index]}
              comments={commentsForImages[index] || []}
            />
          </View> 
        )}
      />

here is the navigation code:

import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import MangaReader from "../screens/MangaReader";
import CommentScreen from "../screens/CommentScreen";
import RecordsScreen from "../screens/RecordsScreen";
import ScreenStore from "../store/ScreenStore";
import { useRoute } from "@react-navigation/native";

const Tab = createMaterialTopTabNavigator();

const SwipeNavigation = () => {
  const { secondScreen } = ScreenStore();
  const route = useRoute();
  const params = route.params;

  return (
    <Tab.Navigator
      initialRouteName="Reader"
      screenOptions={{
        headerShown: false,
        tabBarStyle: { display: "none" },
      }}
    >
      <Tab.Screen name="Reader" component={MangaReader} />
      <Tab.Screen
        name={secondScreen}
        component={secondScreen === "Comment" ? CommentScreen : RecordsScreen}
        initialParams={params}
      />
    </Tab.Navigator>
  );
};

export default SwipeNavigation;

I’m trying to access second screen when i swipe right , it works when i remove carousel . I could have use other alterantive like react native swiper or snap carousel but that would cause another issue.