I am trying to achieve a simple single selectable item, as shown in the image below.

Right now, I have created an array of my data items and using .map to render the components because there are only 3-4 items max, now I want to select only a single item and change the color on the basis, and if I select any other item, it should unselect all the other items but not the current single selected item/component. I tried to do this but I am able to select all of them, obviously. Below is the code:

const items = [
  {
    id: 1,
    iconName: 'male',
    title: 'Male',
    name: 'male',
  },
  {
    id: 2,
    iconName: 'female',
    title: 'Female',
    name: 'female',
  },
  {
    id: 3,
    iconName: 'transgender',
    title: 'Others',
    name: 'others',
  },
];

const Component = ({dispatch, iconName, title, name}) => {
  const [isSelected, setIsSelected] = useState(false);
  return (
    <TouchableOpacity
      activeOpacity={0.6}
      style={
        isSelected
          ? [styles.selectable, {backgroundColor: 'green'}]
          : [styles.selectable, {backgroundColor: COLORS.PINK}]
      }
      onPress={() => {
        setIsSelected(!isSelected);
      }}>
      <View style={styles.row}>
        <Ionicon name={iconName} size={36} color="#fff" />
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  );
};

const Gender = () => {

  return (
    <View>
      <View>
        <Text>Your Gender</Text>
        <View>
          {items.map(item => (
            <Component
              key={item.id}
              title={item.title}
              iconName={item.iconName}
            />
          ))}
        </View>
      </View>
    </View>
  );
};

All though I could solve this by using separate states for each button, so whenever one is selected/pressed, the other states should become false. But then I would have to render individual component without using the .map method which I find inefficient. Can someone provide any solution based on my current approach to this problem?

Thank you!