Как изменить цвет на выбранном элементе плоского списка

Question

Как изменить цвет цветного элемента плоского списка, когда выбранный элемент в плоском списке?

Я пытался отреагировать на собственный документ для плоского списка, но у меня есть вопрос о том, как правильно использовать этот документ в моем коде

function Item({ id, title, selected, onSelect }) {
  return (
    <TouchableOpacity
      onPress={() => onSelect(id)}
      style={[
        styles.item,
        { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
      ]}>
      <Text style={styles.title}>{title}</Text>
    </TouchableOpacity>
  );
}

class ApplyLeaveScreen extends Component {
const [selected, setSelected] = React.useState(new Map());
  const onSelect = React.useCallback(
    id => {
      const newSelected = new Map(selected);
      newSelected.set(id, !selected.get(id));
      setSelected(newSelected);
    },
    [selected],
  );

  render() {
    return (
      <ScrollView>
            <View style={styles.content}>
              <FlatList contentContainerStyle ={{justifyContent:'center', margin:5}}
                renderItem={({ item }) => 
                <Item id={item.id} title={item.title} 
                selected={!!selected.get(item.id)}
                onSelect={onSelect}/>}
                keyExtractor={item => item.id}
                id={item.id}
              />
          </View>
</ScrollView>          
}