ScrollView of TouchableOpacity, get and pass ID of the item clicked to a modal (React Native)

Question

I'm trying to pass the name value of the item pressed in the scrollview, then pass this into the modal (using react-native-modal), which will display the details of the level the user has selected before they want to play.

When I log the onPress value it lists every name of each element in the array, but I just want the name value of the touchable opacity that has been pressed.

SoundsScroll extends Component {
constructor(props){
      super(props)
    }
    state = {
        Sounds: [
           {'name': 'Level 1', 'id': 1},
           {'name': 'Level 2', 'id': 2},
           {'name': 'Level 3',  'id': 3},
           {'name': 'Level 4', 'id': 4},
        ],
        isModalVisible: false,
        level: 'Level 1',
     }

     toggleModal = () => {
      this.setState({isModalVisible: !this.state.isModalVisible});
      };

    playPress = ({ level_var }) => {
      this.toggleModal();
      this.state.level = level_var;
      this.forceUpdate();
    };

   render() {
      return (
         <>
         <View style={styles.container}> 
         <Modal isVisible={this.state.isModalVisible}>  
         <View style={styles.modalStyle}>
         
            <Text style={styles.gameTitleText}>Sounds</Text>
            <Text style={styles.gameTitleText}>{this.state.level}</Text> 

            <Text style={{alignSelf: "flex-start", paddingLeft: 20, fontWeight: "bold", fontSize: 20}}>Instructions:</Text>
            <Text style={{alignSelf: "flex-start", paddingLeft: 20}}>Focus, listen and stay present with different sounds</Text>
            <Text style={{alignSelf: "flex-start", paddingLeft: 20}}>Tip: Earn more XP for longer activities</Text>
            

            <View style={{flexDirection: "row", alignSelf: "center", alignContent: "flex-start", width: ScreenWidth * 0.9, marginTop: 15,}}>
               <Image source={require('stix/Assets/Images/tick.png')} style={{marginLeft: 20,}}/>
               <Text style={{fontSize: 20, marginLeft: 10, alignSelf: "center"}}>Connect Stix</Text>
            </View>

            <View style={styles.buttonContainer}>
               <TouchableOpacity style={styles.minsButton}>
                        <Text style={{fontSize: 20,}}>5 mins</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.playButton} onPress={ this.toggleModal}>
                  <Ionicon name='play' size={60} color="white" />
                  <View>
                     <Text style={{fontSize: 20,}}>Play</Text>
                     <Text style={{fontSize: 11,}}>Press to activate game</Text>
                     </View>
               </TouchableOpacity>
            </View>

            <View style={styles.monsterBackground}>
               <StixSoundsIcon height={150} width={200}/>
            </View>
                        
         </View>

         </Modal>


            <ScrollView horizontal={true} style={{paddingLeft: 20}}>
               {
                  this.state.Sounds.map((item, index) => (

                    // Replace 1 with a variable of unlocked levels
                     <View key = {item.id} style = {[styles.scrollItem, item.id > 2 ? styles.lockedScrollItem : styles.scrollItem]}>

                        <TouchableOpacity style ={{alignItems: "center"}} disabled={item.id > 2 ? true : false} 
                              onPress={onPress={() => this.playPress(item.name)}>
                          <Icon />
                          
                          <Text style = {styles.discoverCardSubtext}>{item.name}</Text>
                        </TouchableOpacity>
                     </View>
                     
                  ))
               }
            </ScrollView>
            
         </View>

         </>
      )
   }
}