All player elements still update when I change one score

import React, { PureComponent } from 'react';
import Counter from './Counter';

class Player extends PureComponent {
  render() {
    console.log(this.props.name + " Rendered");
    return (
      <div className="player">
        <span className="player-name">
          <button className="remove-player" onClick={() => this.props.removePlayer(this.props.id)}>✖</button>
          { this.props.name }
        </span>

        <Counter 
          score={this.props.score}
          changeScore={this.props.changeScore}
        />
      </div>
    );
  }
}

export default Player;

  handleChangeScore = (index) => {
    //returning a function that is called by the Counter component
    return (change) => {
      //updating the score 
      this.setState(prevState => ({ score: prevState.players[index].score += change }));
    };
  }

        {this.state.players.map((player, index) =>
          <Player 
            name={player.name}
            score={player.score}
            id={player.id}
            key={player.id.toString()} 
            changeScore={this.handleChangeScore(index)}
            removePlayer={this.handleRemovePlayer}           
          />
        )}