Uncaught TypeError: props.removePlayer is not a function

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

const Player = (props) => {
  return (
    <div className="player">
      <span className="player-name">
        <button className="remove-player" onClick={ () => props.removePlayer(props.id) }>✖</button>
        {props.name}  
      </span>

      <Counter />
    </div>
  );
}

class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      score: 0
    };
  }

  incrementScore() {
    this.setState( prevState => {
      return {
        score: prevState.score + 1
      };
    });
  }

  //You can use an arrow function to bind "this" which allows you to omit ".bind(this)" in the render method
  decrementScore = () => {
  //You can also wrap the object in parenthesis to omit the "return"
    this.setState( prevState => ({ 
      score: prevState.score - 1
    }));
  }

  handleRemovePlayer = (id) => {
    this.setState( prevState => {
      return {
        players: prevState.players.filter( p => p.id !== id )
      };
    });
  }

  render() {
    return(
      <div className="counter">
        <button className="counter-action decrement" onClick={this.decrementScore}> - </button>
        <span className="counter-score">{ this.state.score }</span>
        <button className="counter-action increment" onClick={this.incrementScore.bind(this)}>+ </button>
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      players: [
        {
          name: "Steven",
          id: 1
        },
        {
          name: "Treasure",
          id: 2
        },
        {
          name: "Ashley",
          id: 3
        },
        {
          name: "James",
          id: 4
        }
      ]
    };
  }

  render() {
    return (
      <div className="scoreboard">
        <Header 
          title="My Scoreboard" 
          totalPlayers={this.state.players.length} 
        />
        {/* Players List */}
        {this.state.players.map( player =>
          <Player 
            name={player.name}
            id={player.id}
            key={player.id.toString()}
            removePlayer={this.handleRemovePlayer}
          />
        )}
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')