How do I prevent rerendering whole FlatList when adding data to array

Question

I have a Flat list like this:

    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item}
    />

The data is just array of unique strings that represent keys to other object.
The array looks like this : ["id1","id2","id3",...]

Inside every Item of FlatList is Image that blicks on rerender... I have another there that is memoized but I have not figured out how to do it with image that has pinch to zoom animation

The problem is I cant figure out how to prevent rerendering the whole FlatList when I add item to data array.

I do not know if I can use useMemo since I do some animations with the item and I do not not if memoizing will broke them.
And I dont even know what should I use as a dependency

This is my renderItem function

const renderItem = ({ item }) => {
    return <Card itemId={item} />;
 };

Answer 1

I do not know if there is better way but i could not make useMemo or useCallback to work, but i found that memo from React is working just fine for me...
I wrapped my component in memo and the flickering effect stopped

import React, {memo} from 'react'
...
export default memo(Item);