Как удалить и добавить элементы массива в объект, используемый для состояния?

class App extends React.Component {
  state = {
    players: {
      team1: [1, 2, 3],
      team2: [4, 5, 6],
    },
  };

  render() {
    return (
      <div>
        <pre>{JSON.stringify(this.state, null, 4)}</pre>

        <form onSubmit = {(e) => this.onJoinTeam(e)}>
          <label>User ID</label>
          <input name = "userId" type = "number" min = "1" max = "6" step = "1" />
          <br />
          <label>New Team</label>
          <select name = "newTeam">
            <option value = "team1">Team 1</option>
            <option value = "team2">Team 2</option>
          </select>
          <br />
          <button type = "submit">Move player</button>
        </form>
      </div>
    );
  }

  onJoinTeam(e) {
    e.preventDefault();

    const newTeam = e.currentTarget.newTeam.value;
    const userId = parseInt(e.currentTarget.userId.value, 10);

    const { players } = this.state;

    for (const team in players) {
      const teamPlayers = players[team];
      const playerIndex = teamPlayers.findIndex(tp => tp === userId);

      if (playerIndex !== -1) {
        teamPlayers.splice(playerIndex, 1);
        break;
      }
    }

    players[newTeam].push(userId);

    this.setState({ players });
  }
}

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

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id = "root"></div>

class App extends React.Component {
  state = {
    players: {
      team1: [1, 2],
      team2: [5, 7],
      team3: [9, 6, 7],
    },
    id: 7,
  }

  componentDidMount() {
    this.change( "team1" );
  }

  change = team => {
    const { players, id } = this.state;
    const newPlayers = Object.entries(players).map(([key,value]) =>
      team === key
        ? { [key] : [ ...value, id ] }
        : { [key]: value.filter(player => player !== id) }
    ).reduce( ( obj, item) => ({
      ...obj,
      ...item,
    }) );
    
    this.setState({players: newPlayers})
  }

  render() {
    console.info( this.state.players );
    return (
         <div>
         Look the console to see the old and new value of the players.
         </div>
    );
  }
}

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

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "root"></div>