React Native Gesture Handler + Reanimated Flat List Scroll

Question

I'm having a problem with react-native-gesture handler animation in a FlatList. when i try to scroll on the flatList the behavior of PanGesture not trigger scroll event. Reanimated Version - ~2.5

Flatlist

<FlatList
            data={test}
            ref={flatListRef}
            ItemSeparatorComponent={Divider}
            style={{
              marginTop: 18,
            }}
            scrollEnabled
            renderItem={({ item }) => {
              return (
                <ActionItem
                  simultaneousHandlers={flatListRef}
                  actions={[
                    {
                      type: 'UPDATE',
                      handlePress: () => {
                        console.log(item.id);
                      },
                    },
                    {
                      type: 'UPDATE',
                      handlePress: () => {
                        console.log(item.id);
                      },
                    },
                  ]}
                >
                  <View style={styles.container}>
                    <Text style={{}}>{item.name}</Text>
                  </View>
                </ActionItem>
              );
            }}
          />

ActionItem

import { useTheme } from '@hooks';
import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Dimensions,
  TouchableOpacity,
} from 'react-native';
import {
  PanGestureHandler,
  PanGestureHandlerGestureEvent,
} from 'react-native-gesture-handler';
import Animated, {
  useAnimatedGestureHandler,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
  withSpring,
} from 'react-native-reanimated';
import { IActionItem } from './types';
import Edit from '@assets/svgs/icons/edit.svg';
const threshold = (-Dimensions.get('window').width - 18) * 0.05;
function ActionItem<T>({
  children,
  actions,
  simultaneousHandlers,
}: IActionItem<T>) {
  const [actionsWidth, setActionsWidth] = React.useState<number>(0);
  const translateX = useSharedValue(0);
  const theme = useTheme();
  const gestures = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>({
    onStart: () => {
      translateX.value = withTiming(0);
    },
    onActive: (e) => {
      if (e.translationX < 0) {
        translateX.value = withSpring(e.translationX);
      }
    },
    onEnd: (e) => {
      const shouldHideActions = e.translationX > threshold;
      if (shouldHideActions) {
        translateX.value = withTiming(0);
      } else {
        translateX.value = withSpring(-actionsWidth);
      }
    },
  });

  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateX: translateX.value,
        },
      ],
    };
  });
  return (
    <Animated.View style={styles.container}>
      <Animated.View
        style={styles.actionsContainer}
        onLayout={(e) => {
          setActionsWidth(e.nativeEvent.layout.width);
        }}
      >
        {actions?.map((action, index) => {
          return (
            <TouchableOpacity
              key={index}
              onPress={action.handlePress}
              style={[
                {
                  marginRight: index !== actions.length - 1 ? 20 : 0,
                  marginLeft: index === 0 ? 20 : 0,
                },
              ]}
            >
              {action.type === 'UPDATE' && <Edit />}
            </TouchableOpacity>
          );
        })}
      </Animated.View>
      <PanGestureHandler
        simultaneousHandlers={simultaneousHandlers}
        onGestureEvent={gestures}
      >
        <Animated.View style={[animatedStyles, styles.action]}>
          {children}
        </Animated.View>
      </PanGestureHandler>
    </Animated.View>
  );
}
const styles = StyleSheet.create({
  container: {
    width: '100%',
    elevation: 10,
  },
  actionsContainer: {
    position: 'absolute',
    flexDirection: 'row',
    alignItems: 'center',
    height: '100%',
    flex: 1,
    right: 0,
  },
  action: {
    backgroundColor: 'red',
  },
});
export default ActionItem;

i'm using the flat list from React-Native-Gesture-handler and i'm passing the reference of flatlist to scroll work but doesn't work, anyone have some ideia why ?