Some performance issues when combining FlatList, react-native-gesture-handler, and react-native-reanimated

Description

I am going to replicate the apple store animation effect, there is a zoom in and zoom out effect when sliding the interface and clicking to each View, and a long press can keep the zoom out, I wrote a minimal reproduction of the example, but on the real machine and emulator, as long as the animation and flatlist sliding are running at the same time, it is just a sliding lag, is there something that I am doing wrong? What should I do to improve it? My minimal re-code has been written below

https://github.com/software-mansion/react-native-gesture-handler/assets/28828271/366e852d-c6b6-49ab-a18f-6b44df7f855a

Steps to reproduce

import { Text, SafeAreaView } from "react-native";
import { Gesture, GestureDetector, FlatList } from "react-native-gesture-handler";
import Animated, {
  Easing,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";

const data = new Array(50).fill("1");
export const LoginScreen = () => {
  return <SafeAreaView style={{ flex: 1 }}>
    <FlatList data={data}
              style={{ flex: 1 }}
              renderItem={({ item, index }) => <ItemTap index={index} />}
    />
  </SafeAreaView>;
};
const ItemTap = ({ data, index }) => {

  const scale = useSharedValue(1);
  const gesture = Gesture.LongPress()
    .maxDistance(1)
    .minDuration(1000 * 60 * 30)
    .onBegin((e) => {
      "worklet";
      scale.value = withTiming(0.95, {
        duration: 300,
        easing: Easing.inOut(Easing.quad),
      });
    })
    .onEnd((e) => {
      console.log("onEnd==>", e);
    })
    .onFinalize((e) => {
      "worklet";
      scale.value = withTiming(1, {
        duration: 100,
        easing: Easing.inOut(Easing.quad),
      });
    });
  return <GestureDetector gesture={gesture}>
    <Animated.View style={{
      height: 200,
      borderRadius: 10,
      borderWidth: 1,
      borderColor: "red",
      marginBottom: 20,
      marginHorizontal: 20,
      alignItems: "center",
      justifyContent: "center",
      transform: [{ scale }],
    }}>
      <Text>{index}</Text>
    </Animated.View>
  </GestureDetector>;
};

Snack or a link to a repository

https://github.com/yinminqian/Troubleshooting

Gesture Handler version

2.15.0

React Native version

0.73.6

Platforms

Android, MacOS

JavaScript runtime

Hermes

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

iphone 11 ,xiaomi10

Acknowledgements

Yes

software-mansion / react-native-gesture-handler