I have an array called 'homeTeamPlayers' that outputs data such as

currentScore: 10
key: "USQ5"
numberOfActions: 7
playerId: "08da3a6f-6d358asg7365sgh"
playerName: "Adam Sandler"
position: 5
teamId: "08da3a6f-4ghsi-8a16-9e90f202dbca"
teamSheetMemberId: "08da3a6f-6idug35-2343f422b32e"

I have a list dropdown button where the user can select a player,

<div className="d-flex">
  <span className="py-1"><b>Select Penalty Kicker:</b></span>
  <Form.Control 
    as="select"
    size="sm"
    ref={dropdownSelectPlayerRef}
    value={selectedPlayer} 
    onChange={(event) => { setSelectedPlayer(event.target.value)}}
    className="ml-1"
    style={{ width: '175px' }}
  >
    <option key={0}>Please select kicker...</option>   
    {startTeamId == homeTeam.id ? homeTeamPlayers && homeTeamPlayers.map(x => {
      return <option key={x.position} value={x.position}>{x.key}</option>})}

  </Form.Control>
</div>

I am currently only passing through the player postion when I setSelectedPlayer, i need the teamSheetID also to be passed through (or the entire array if possible)

Any help is appreciated