FlatList rendering is heavy for big data set

Question

In my application I have a FlatList with dataset of 100 items in it. Each item has a complex UI and I noticed that it's taking a heavy toll on performance. The page that has the list takes up to 5 seconds to load. I noticed that the moment the component is rendered for the first time, the renderItem function of the FlatList is also called for each and every item in my data set, I also noticed that it also happens if there any other setState change for other stuff on that page. Is there a way to prevent this re-rendering of the flat list or at least to re-render only the visible items - just like with Recycle with in native Android? How can I only render the visible items when the component first appears? I tried to use initialNumToRender and maxToRenderPerBatch but neither have worked.

Here is an example of the code:

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {

  const [text, setText] = React.useState('')

  const renderItem = ({ item }) => {
    console.log("Render Item")
    return (<Item title={item.title} />)
};

  return (
    <SafeAreaView style={styles.container}>

      <TextInput
        value={text}
        onChangeText={(val) => setText(val)}
      />

      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        initialNumToRender={6}
        maxToRenderPerBatch={6}
      />

    </SafeAreaView>
  );
}

If I try to type something in TextInput the whole list re-renders but nothing in the list has changed.. how can I prevent this?