React-удаление из середины списка удаляет последний элемент

Я работаю над простым приложением практики в React. У меня есть четыре компонента: основной компонент, который хранит пользователей как объекты в массив, userView компонент, который делает каждого пользователя информация, в файл userlist компонент, который оказывает все userViews, и команду adduser компонент, который добавляет нового пользователя к главным компонентам отправить. Добавление и редактирование элементов в списке работает правильно. Тем не менее, я столкнулся с проблемой с delete. Каждый элемент списка имеет свою собственную кнопку delete, которая должна удалить этот элемент, но независимо от того, какая кнопка удаления используется, последний элемент в списке удаляется. Я удаляю из массива, содержащего пользователей в Main с помощью splice, и я проверил, что splice передается правильный индекс при нажатии кнопки удаления.

Я думаю, что это имеет какое-то отношение к ключам на компонентах, когда виртуальные DOM rerenders, но я попытался добавить ключи с несколькими различными методами (component.id, глобальная переменная счетчика, индекс в массиве) и по-прежнему не имели удача. Вот соответствующие фрагменты кода (я оставил как можно больше для краткости):

var Main = React.createClass({
  getInitialState: function(){
    return {
      allUsers: []
    }
  },
  removeUser: function(index){
    console.log('index to remove at: ', index); //Gives correct index
    var newUsersArray = this.state.allUsers.slice();
    newUsersArray.splice(index, 1);
    this.setState({
      allUsers: newUsersArray
    });
  },
  render: function(){
    return (
      <div>
        <AddUser addNew={this.addUser} index={this.state.allUsers.length} />
        <UserList users={this.state.allUsers} edit={this.editUser} remove={this.removeUser} />
      </div>
  )
  }
})

  var UserList = React.createClass({
    render: function(){
      var users = this.props.users;
      var edit = this.props.edit;
      var remove = this.props.remove;
      return (
        <div>
        {users.map(function(user){
          return <UserView userName={user.name} userRoles={user.roles} editUser={edit} remove={remove} key={user.id} index={user.index}/>
    })}
       </div>
      );
    }
});

var UserView = React.createClass({
  handleDelete: function(){
    this.props.remove(this.props.index);
});

Я пропустил совсем немного, вот весь мой код реакции в скрипке:http://jsfiddle.net/dpdbv731/. В принципе, при щелчке компонента userView он вызывает функцию removeUser на Main с индексом этого компонента в качестве параметра. Кто-нибудь видит, в чем я ошибаюсь?