How to scroll flat list without touch effect - react-native

Question

I am new in react native, I have used FlatList which has ListItem as component:
<FlatList
style={styles.container}
data={items}
renderItem={({ item }) => (
<ListItem
title={item.title}
onPress={() => console.log("this is pressed", item.id)}
)}
/>
)}
keyExtractor={(item) => item.id.toString()}
/>
Everything is working fine only the
Problem is: when user scrolls the view i.e FlatList the point where finger is pressed that component shows touch effect. I want touch effect happened only when that element is pressed not when is scrolled. Is there any way to solve this?
Code for ListItem
import React from "react";
import { View, StyleSheet, TouchableHighlight } from "react-native";
import { AppText } from "./AppText";
import colors from "../config/colors";
import Swipeable from "react-native-gesture-handler/Swipeable";
function ListItem({title,onPress}) {
return (
<Swipeable renderRightActions={renderRightActions}>
<TouchableHighlight onPress={onPress}>
<View style={[{ backgroundColor }, styles.container]}>
<View style={styles.textContainer}>
{title && <AppText style={styles.title}>{title}</AppText>}
</View>
</View>
</TouchableHighlight>
</Swipeable>
);
}
const styles = StyleSheet.create({
container: {
flexDirection: "row",
padding: 10,
},
textContainer: {
marginLeft: 10,
justifyContent: "center",
},
title: {
fontWeight: "900",
},
});
export default ListItem;