add radio buttons with custom text

I have a component with icons and some text.

const criteriaList = ['New','Freunde',];export const FilterCriteriaList: React.FunctionComponent = () => {  //const [checked, setChecked] = React.useState('first');  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>            {/* <RadioButton        value="first"        //status={ checked === 'first' ? 'checked' : 'unchecked' }        onPress={() => setChecked('first')}      /> */}<Text style={styles.text}>{item}</Text></View><View style={styles.horizontalLine} /></View>      ))}</View>  );};

The TouchableOpacity doesn't work properly and nothing happens when I click on the icon. Also, the touchable opacity covers a lot more area than just the icon. Changing the height isn't feasible either since it ruins the design.

So, I am trying to use radio buttons from

import { RadioButton } from 'react-native-paper';

I commented out the TouchableOpacity and tried using Radiobuttons for testing but it gives me an error regarding unrecognisable material ui..The app crashes before I can even read the full error.

How exactly can I use radio buttons here? My component should look like it looks right now.