Javascript 添加带有自定义文本的单选按钮

我有一个带有图标和一些文本的组件

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>
  );
};

我注释掉了TouchableOpacity并尝试使用单选按钮进行测试，但它给了我一个关于无法识别的材质ui的错误。应用程序在我读取完整错误之前崩溃

我怎样才能在这里使用单选按钮？我的组件应该看起来像现在一样。

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