Reactnative 自定义单选按钮在react native 中不起作用

我正在创建自定义无线电BTN.我的代码如下:

 const [isAvailable, setIsAvailable] = useState([
{id: 0, value: true, title: 'Always available', selected: true},
{id: 1, value: false, title: 'Never available', selected: false},
{
  id: 2,
  value: false,
  title: 'Availabe for specific hours',
  selected: false,
},
 ]);

现在，我的单选组件正由一系列assets资源 调用，但其基本思想是，当我调用单选组件时，将显示各自的视图.无线电BTN被称为如下:

{isAvailable.map(option => (
      <Row
        key={option.id}
        rightComponent={'radio'}
        title={option.title}
        onPress={() => onPress(option)}
        isSwitched={option.selected}
      />
    ))}

我的OnPress函数如下所示:

const onPress = option => {
setIsAvailable(
  isAvailable.map(isAvailableOption => {
    isAvailableOption.id === option.id
      ? {...isAvailableOption, selected: true}
      : {...isAvailableOption, selected: false}；
  }),
);

}；

现在，我的Row组件如下所示:

rightComponent === 'radio' ? (
          <TouchableOpacity
            style={styles.radioBtn}
            onPress={onPress}
            key={key}>
            {isSwitched === true ? (
              <>
                <Ionicons
                  name={'radio-button-on-outline'}
                  style={{...styles.rightIcon, ...rightIconColor}}
                />
              </>
            ) : (
              <>
                <Ionicons
                  name={'ellipse-outline'}
                  style={{...styles.rightIcon, ...rightIconColor}}
                />
              </>
            )}
          </TouchableOpacity>
        ) : ({...})

但是，每当我点击任何图标时，它都不起作用，请告诉我这里我哪里错了？