toString method doesn't work on my keys, returns error

const players = [
    {
        name: "Guil",
        score: 50,
        id: 0
      },
      {
        name: "Treasure",
        score: 85,
        id: 1
      },
      {
        name: "Ashley",
        score: 95,
        id: 2
      },
      {
        name: "James",
        score: 80,
        id: 3
      }
]

const Header = (props) => {
    console.log(props);
    return (
        <header>
            <h1>{props.title}</h1>
            <span className="stats">Players: {props.totalPlayers}</span>
        </header>
    );
}

// create counter component
const Player = (prop) => {
    return (
        <div className="player">
            <span className="player-name">
                {prop.name}
            </span>

            <Counter 
                score={prop.score}
            />
        </div>
    );
}


const Counter = (prop) => {
    return (
        <div className="counter">
            <button className="counter-action decrement"> - </button>
            <span className="counter-score">{prop.score}</span>
            <button className="counter-action increment"> + </button>
        </div>
    );
}

const App = (prop) => {
return (
    <div className="scoreboard">
        <Header title="Scoreboard" totalPlayers={1}  />

        {/* Players list */}
        {prop.initialPlayers.map( player =>
            <Player 
                name={player.name} 
                score={player.score} 
                key={player.id.toString}
            /> 
        )}

    </div>
);

}

ReactDOM.render(
    <App initialPlayers={players} />,
    document.getElementById('root')
);