how to use blockExternalGesture method with a FlatList

[Glazzes]

Hi there, I'm currently trying to build a FlatList which renders zoomable images so I need the scroll behavior to stop as soon as I start pinching, I found blockExternalGesture method in the documentation, the example is used with a ScrollView and it works REALLY WELL, I wonder how can I achieve the same result while using a Flatlist.

So far I've tried passing the Flatlist ref and wrapping the Flatlist with a native gesture, I haven't gotten any positives result while doing this, so far this is what I have

import React from 'react';
import { FlatList, StyleSheet, useWindowDimensions } from 'react-native';
import { Gesture } from 'react-native-gesture-handler';
import { GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const colors = ['orange', 'green', 'salmon', 'cyan'];

const Element = ({ color, gesture }) => {
  const { width, height } = useWindowDimensions();
  const scale = useSharedValue<number>(1);

  const animatedStyle = useAnimatedStyle(
    () => ({
      width,
      height,
      backgroundColor: color,
      transform: [{ scale: scale.value }],
    }),
    [width, height, color, scale]
  );

  const pinch = Gesture.Pinch()
    .blocksExternalGesture(gesture)
    .onUpdate((e) => (scale.value = e.scale))
    .onEnd(() => (scale.value = withTiming(1)));

  return (
    <GestureDetector gesture={pinch}>
      <Animated.View style={animatedStyle} />
    </GestureDetector>
  );
};

export default function () {
  const scrollGesture = Gesture.Native();

  const renderItem = (info) => {
    return <Element color={info.item} gesture={scrollGesture} />;
  };

  return (
    <GestureDetector gesture={scrollGesture}>
      <FlatList data={colors} renderItem={renderItem} />
    </GestureDetector>
  );
}