React native, using CellRendererComponent in flatlist breaks the React.memo logic

Question

I have a flatlist in react native. I want to apply zIndex to each item of the flatlist so I can put a specific item on top of the others. Simply putting zIndex in the item style does not work and the only way I found to do this is to use CellRendererComponent in the flatlist. When doing this, the items have the proper zIndex applied.

However, to optimise the re-rendering, I use React.memo with the renderItem function which prevents unnecessary re-renderings. On the code bellow, when there is not the CellRendererComponent property, a click on refresh does not re-render the components (the comment 'rendering component 1' or 'rendering component 2' are not logged) which means that React.memo is doing its job properly. Adding CellRendererComponent seems to break this and the components are re-rendering at every click on refresh.

What is the explanation for such a behaviour? How can I both apply zIndex to each items while maintaining the performance of React.memo?

const areEqual = (prevProps, nextProps) => {
    console.log('is checking if props id are equal');
    return prevProps.id === nextProps.id;
  };

const Component = React.memo((props) => {
    console.log('rendering component ' + props.id)
    return(
        <View style={{width: 300, height: 100}}>
            <Text>{props.text}</Text>
        </View>
    )
}, areEqual)

const App = (props) => { 

    const [refresh, setRefresh] = React.useState(false)
     
    const data = [
        { id: '1', text: 'Item 1', zIndex: 1 },
        { id: '2', text: 'Item 2', zIndex: 2 },
      ];

      const renderItem = ({ item }) => {
        return (
            <Component id={item.id} text={item.text}/>
        );
      };
    
      return (
        <View>
            <FlatList
                data={data}
                keyExtractor={(item) => item.id}
                renderItem={renderItem}
                CellRendererComponent={({ children, index, style, ...props }) => {            
                    return (
                        <View style={{zIndex: 2}} index={index} {...props}>
                            {children}
                        </View>
                    )
                }}
            />

            <TouchableOpacity 
                onPress={() => {
                    setRefresh(!refresh)
                }}
            >
                <Text>Refresh</Text>
            </TouchableOpacity>
        </View>
      );
}

On the code above, if I don't use the CellRendererComponent props, each time I click on the refresh button, there is no 'rendering component 1' or 'rendering component 2'. When I add it, those logs appear but the 'is checking if props id are equal' is not logged.

Thank you very much.