Почему метод splice удаляет только первый индекс массива в React?

Я делаю небольшое приложение в React с PokeAPI, и у меня возникают проблемы с использованием метода splice() для удаления элемента (покемона) из массива (команды). Независимо от того, какой элемент я выбираю для удаления, он удаляет только первый элемент в массиве.

Это функция, которая передается через реквизит, которую я использую для удаления элемента.

removePokemon = (index) => {
  const team = [...this.state.team]
   team.splice(index, 1)
   this.setState({team})
  }

А вот компонент Team, где он на самом деле используется.

import React, { Component } from 'react';
import Button from 'react-bootstrap/Button'


class Team extends Component {
    render() {
        return (
            <div>
                <h2>{this.props.trainer && <p>{this.props.trainer}'s Team</p>}</h2>
                {this.props.team &&
                <div>
                    {this.props.team.map((pokemon, i) => (
                        <div key = {pokemon.id}>
                            <span className='cardHeader'>#{pokemon.id} - {pokemon.name}</span>
                            <img src = {pokemon.sprites.front_default} alt = {pokemon.name}/>
                            <Button onClick = {this.props.removePokemon}>Remove from team</Button>
                        </div>
                    ))}
                </div>
                }

            </div>
        );
    }
}

export default Team;