No overload matches on FlatList React Native

I am working on my <FlatList> in React Native.

I have the ff flatlist code:

<FlatList            data={this.state.books}            keyExtractor={(item, index) => index.toString()}            renderItem={({item}: {item: any}, index: number) =>              this.renderItem(item, index)            }            ListEmptyComponent={<View style={styles.listEmpty}><Text style={styles.emptyText}>Not Reading any books</Text></View>            }

And then inside my renderItem function:

 renderItem = (item: string, index: number) => (<View style={styles.renderContainer}><View style={{flex: 1, justifyContent: 'center', paddingLeft: 10}}><Text>{item}</Text></View><TouchableOpacity onPress={() => console.log('hello')}><View style={styles.btnMarkRead}><Text style={{fontWeight: 'bold', color: 'black'}}>Mark as Read</Text></View></TouchableOpacity></View>  );

My typescript code is highlighting the word renderItem on my FlatList declaration and it saying:

No overload matches this call.  Overload 1 of 2, '(props: FlatListProps<String> | Readonly<FlatListProps<String>>): FlatList<String>', gave the following error.    Type '({ item }: { item: any; }, index: number) => JSX.Element' is not assignable to type 'ListRenderItem<String>'.  Overload 2 of 2, '(props: FlatListProps<String>, context: any): FlatList<String>', gave the following error.

I have the ff state:

this.state = {  totalCount: 0,  readingCount: 0,  doneCount: 0,  isAddNewBookVisible: false,  textInputData: '',  books: [],};

What should I do to fix the highlight error?