Swipeable component doesn't work in BottomTabNavigator

Question

I have a FlatList inside of a screen that uses BottomTabNavigator from react-navigation-bottom-tabs. Inside of the FlatList are swipeable items, using Swipeable from react-native-gesture-handler. Inside of the tab screens these items aren't swipeable for some reason. However, when I put the screen with the FlatList inside of a StackNavigator screen, and nest that inside of the BottomNavigator tabscreen, it does work. I'm at a loss for why it works this way but not the other way. Does anyone have the slightest clue why this is the case?

Edit: I've seen the issue of not being able to navigate bottom tabs using swipe. I'm not trying to navigate tabs though. Swipeable is applied to items inside a FlatList, that is inside its own component, that is rendered by the Home screen, which in turn is used by the navigator.

The TabsNavigator:

export default function TabsNavigator() {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="List"
        component={HomeStack}
        options={{
          tabBarIcon: ({ focused }) => (
            <FontAwesomeIcon
              icon={faList}
              style={{ color: focused ? "#104543" : "#CCC" }}
            />
          ),
          tabBarActiveTintColor: "#104543",
        }}
      />
     )
    }

The HomeStack (StackNavigator):

export default function StackNavigator() {
  const Stack = createStackNavigator();

  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{ headerShown: false }}
        name="Home"
        component={Home}
      />
    </Stack.Navigator>
  );
}

The Home screen:

export const Home = ({ navigation }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    const fetchUserData = async () => {
      const data = await axios.get(
        `http://10.0.2.2:80/
`,
        {
          auth: {
            username: "***",
            password: "***",
          },
        }
      );
      dispatch(setUsersData(data.data));
    };
    return navigation.addListener("focus", async () => {
      await fetchUserData();
    });
  }, [navigation]);
  return (
    <View style={styles.container}>
      <SearchBarHeader />
      //The component with the FlatList in question that contains swipeable items
      <SwipeableFlastList />
    </View>
  );
};

The preferred outcome would be to place the Home screen inside of the Tab.Screen component like this:

<Tab.Screen
        name="List"
        component={Home}
/>

Per request, the Swipeable component. It's inside of another ListItem component, which inturn is inside a component that renders the flatlist:

<KeyboardAvoidingView style={styles.container}>
      <Swipeable
        renderRightActions={(
          progress: Animated.AnimatedInterpolation,
          dragAnimatedValue: Animated.AnimatedInterpolation
        ) => renderRightActions(progress, dragAnimatedValue, item.Id)}
        renderLeftActions={(
          progress: Animated.AnimatedInterpolation,
          dragAnimatedValue: Animated.AnimatedInterpolation
        ) => renderLeftActions(progress, dragAnimatedValue, item.Id)}
        useNativeAnimations={true}
        onSwipeableOpen={() => setSwipeOpen(!swipeOpen)}
        onSwipeableClose={() => setSwipeOpen(!swipeOpen)}
      >
        <TouchableWithoutFeedback>
          <AccordionListItem item={item} />
        </TouchableWithoutFeedback>
      </Swipeable>
    </KeyboardAvoidingView>