TouchableOpacity and onPress for Icons

I am trying to use onPress for icons. For this, I thought of using TouchableOpacity but nothing happens when I click on the icon. I don't see any console logs.

I also tried wrapping the icon in an additional View but that doesn't work either.

const criteriaList = ["Nur Frauen","Freunde Zweiten Grades",]export const FilterCriteriaList: React.FunctionComponent = () => {  return (<View style={styles.container}><View style={styles.horizontalLine} />          {criteriaList.map((item: string) => (<View key={item}><View style={styles.criteriaRow}><TouchableOpacity style={styles.iconContainer} onPress={()=>console.log('dhjksds')}><Icon style={styles.icon} name="circle-thin" color="#31C283" size={moderateScale(20)}/></TouchableOpacity><Text style={styles.text}>{item}</Text></View><View style={styles.horizontalLine} /></View>      ))}</View>  );};const styles = StyleSheet.create({  container: {    flex: 1,  },  criteriaRow: {      flexDirection: 'row',      paddingLeft: moderateScale(25),  },  horizontalLine: {    width: '100%',    height: moderateScale(1),    backgroundColor: '#E0E0E0',  },  text: {    paddingLeft: moderateScale(15),    paddingBottom: moderateScale(15),    marginBottom: moderateScale(15),    paddingTop: moderateScale(15),  },  icon: {      paddingTop: moderateScale(12),  },  iconContainer: {      backgroundColor: 'red',  }});

It looks like this and I click in the middle of the circle icon.

What else can I try?