react native flatlist removeclippedsubviews not working

Question

can anybody explain me why removeClippedSubviews not working on the function:

const renderItem: ListRenderItem<IArr> = ({ item }) => {
  return (
    <View style={{width}}>
      <FlatList
        keyExtractor={(i) => i.id}
        data={Data}
        renderItem={renderData}
        removeClippedSubviews
        initialNumToRender={10}
        nestedScrollEnabled
        scrollEnabled={true}
        maxToRenderPerBatch={100}
        windowSize={7}
      />
    </View>
  )
};

App.tsx

import React, { useRef } from 'react';
import { Dimensions, ListRenderItem, Pressable, Image, StyleSheet, Text, View, Animated as An, StyleProp } from 'react-native';
import { GestureHandlerRootView, FlatList, ScrollView } from 'react-native-gesture-handler';
import Animated, { StyleProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
import { Data, RecyclerList } from './RecyclerlistView';

interface IArr {
  id: string;
  text: string;
}

const arr: IArr[] = [
  {
    id: '1',
    text: 'DATA'
  },
  {
    id: '2',
    text: 'SERVER'
  },
  {
    id: '3',
    text: 'Auto'
  },
  {
    id: '4',
    text: 'CENTER'
  }
];

const AnimatedFlatlist = Animated.createAnimatedComponent(FlatList);

const { width, height } = Dimensions.get('window');

const renderData = ({ item }) => {
  console.log(item);
  return (
    <View style={{flex: 1}}>
      <Text>{item.name}</Text>
      <Image source={{uri: item.image}} style={{height: 200, width: 200,}} />
    </View>
  )
}

const renderItem: ListRenderItem<IArr> = ({ item }) => {
  return (
    <View style={{width}}>
      <FlatList
        keyExtractor={(i) => i.id}
        data={Data}
        renderItem={renderData}
        removeClippedSubviews
        initialNumToRender={10}
        nestedScrollEnabled
        scrollEnabled={true}
        maxToRenderPerBatch={100}
        windowSize={7}
      />
    </View>
  )
};

interface INav {
  rNav: {
    transform: {
      translateX: number;
    }[]
  },
  onPress: (i: number) => void;
}

const Header = ({ rNav, onPress }: INav) => {
  return (
    <View style={{flex: 1, backgroundColor: '#fff'}}>
    <View style={[{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 20, backgroundColor: '#ccc', width}]}>
      {
        arr.map((el, i) => (
          <Pressable onPress={() => onPress(i)} key={i}>
            <Text>{el.text}</Text>
          </Pressable>
        ))
      }
    </View>
    <Animated.View style={[{backgroundColor: 'red', height: 8, width: width / 4}, rNav]} />
    </View>
  )
};

export default function App() {
  const translateX = useSharedValue(0);

  const gestureEvent = useAnimatedScrollHandler((e) => {
    translateX.value = e.contentOffset.x
  });

  const sr = useRef(null);
  const scrollRef = useRef<FlatList>(null);

  const onPress = (i: number) => {
    //translateX.value = i * width
    scrollRef.current?.scrollToIndex({ animated: true, index: i });
  };

  const rNav = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value * 0.25 }]
    }
  });

  return (
    <GestureHandlerRootView style={s.container}>
      <ScrollView stickyHeaderIndices={[1]} nestedScrollEnabled style={{flex: 1,}}>
        <View style={{height: 300, backgroundColor: 'red'}}>
          <Text>Hello</Text>  
        </View>
      <Header onPress={(i) => onPress(i)} rNav={rNav} />
      <AnimatedFlatlist
        onScroll={gestureEvent}
        ref={scrollRef}
        onEndReached={() => console.log('S')}
        keyExtractor={(item, i) => item.id}
        data={arr}
        style={{flex: 1}}
        horizontal
        pagingEnabled
        scrollViewProps={{nestedScrollEnabled: true}}
        renderItem={renderItem}
      />
  
      </ScrollView>
    </GestureHandlerRootView>
  )
}

const s = StyleSheet.create({
  container: {
    flex: 1,

  }
})