react-native - FlatList のアイテムのインデックス/キーを使用して、Native TouchableOpacity onPress に反応する

Question

アプリに FlatList コンポーネントと連絡先画面を作成しました。連絡先画面の画像の近くに「ハート」アイコンを追加したいと考えています。全てのアイテムの近くにハートアイコンを追加しました。しかし、これらのアイコンの 1 つを押すと、1 つだけでなく、すべての色が赤に変わります。クリックしたアイテムの色を変えたい。

プログラムのスクリーンショット:

これが FlatList コンポーネントです。

import React, { Component } from 'react';
import { View, Text, SafeAreaView, StyleSheet, FlatList, Image, TouchableOpacity, 
TouchableWithoutFeedback, TextInput } from 'react-native';
import { Right, Icon } from 'native-base';
import data from '../../data';

export default class FlatListComponent extends Component {
  state = {
    text: '',
    contacts: data,
    like: false,
    color: 'white',
  }

  toggleLike=()=>{
    this.setState({
        like: !this.state.like
    })

    if(this.state.like){
      this.setState({
        color: 'red',
    })
    }else{
      this.setState({
      color: 'white',
   })
 }
 }

renderContactsItem = ({item, index}) => {

return (
  <View style={[styles.itemContainer]}>
    <Image
      style={styles.avatar}
      source={{ uri: item.image }} />
    <View style={styles.textContainer}>
      <Text style={[styles.name], {color: '#fafafa'}}>{item.first_name}</Text>
      <Text style={{ color: '#fafafa' }}>{item.last_name}</Text>
    </View>
    <Right style={{justifyContent: 'center'}}>
      <TouchableWithoutFeedback onPress={this.toggleLike}>
        {/*{this.like ? (
            <Icon name="heart" type='FontAwesome' style={{paddingRight: 10, fontSize: 30, color: 'red'}} />
          ) : 
          ( <Icon name="heart" type='FontAwesome' style={{paddingRight: 10, fontSize: 30, color: 'white'}} /> )
        }*/}
        <Icon name='heart' type='FontAwesome' size={32} style={{color: this.state.color === "white" ? 'white' :'red', paddingRight: 10 }}/>
        {/*<Icon name="heart" type='FontAwesome' style={{paddingRight: 10, fontSize: 30, color: this.state.color}} />*/}
      </TouchableWithoutFeedback>
    </Right>
  </View>
);
}

searchFilter = text => {
  const newData = data.filter(item => {
    const listItems = `${item.first_name.toLowerCase()}`
    return listItems.indexOf(text.toLowerCase()) > -1;
  });

  this.setState({
    contacts: newData,
  });
};

renderHeader = () => {
  const {text} = this.state;
  return (
    <View style={styles.searchContainer}>
      <TextInput 
        onChangeText = {text => {
          this.setState ({
            text,
          });
          this.searchFilter(text);
        }}
        value={text}
        placeholder="Search..." 
        style={styles.searchInput} />
    </View>
  )
}

render() {
  return (
    <FlatList
      ListHeaderComponent={this.renderHeader()}
      renderItem={this.renderContactsItem}
      keyExtractor={item => item.id}
      data={this.state.contacts}
    />
  );
}
}

 const styles = StyleSheet.create({
itemContainer: {
  flex: 1,
  flexDirection: 'row',
  paddingVertical: 10,
  borderBottomWidth: 1,
  borderBottomColor: '#eee'
},
avatar: {
  width: 50,
  height: 50,
  borderRadius: 25,
  marginHorizontal: 10,
},
textContainer: {
  justifyContent: 'space-around',
},
name: {
  fontSize: 16,
},
searchContainer: {
  padding: 10

},
searchInput: {
  fontSize: 16,
  backgroundColor: '#f9f9f9',
  padding: 10,
}
});

お問い合わせ画面は次のとおりです。

import React from 'react';
import 'SafeAreaView' from 'react-native';
import FlatList from './FlatList';

export default function Contact() {
    <SafeAreaView style={{ flex: 1 }}>
        <FlatList />
    </SafeAreaView>
}

これをどのように実装できますか？