无法在React Native中更改CheckBox的状态

我正在尝试渲染和映射名称列表以及旁边的复选框。我成功地做到了。但是，当我尝试更改CheckBox的状态时，我点击的名称消失了，并弹出警告，指出“列表中的每个孩子都应具有唯一的“键”道具。该复选框显然不会更改状态。 这是保存在namesList.js中的名称列表的示例

 {
    id: 1,
    fName: "name",
    lName: "name",
    present: false,
},

这是我在newGroup.js的renderMethod中映射它的方式：

render() { 
    const myPlayers = this.state.allPlayers.map(name => 
        <Player 
            key={name.id} 
            id={name.id}
            checked={name.present} 
            handlePress={this.handlePress}
            fName={name.fName} 
            lName={name.lName}
        />)

这是放置在渲染上方但仍在类内部的handlePress方法：

    handlePress(id){
    this.setState(prevState => {
        const newList = prevState.allPlayers.map(name => {
            if(name.id === id){
                return name.present = !name.present
            }
            return name
        })                
        return {
            allPlayers: newList,
        }
    })
    console.log("pressed", id)
}

这是我的构造函数：

constructor() {
    super()
    this.state = { 
        allPlayers: namesList,
     }
    this.handlePress = this.handlePress.bind(this)
}

最后，我的播放器组件放置在player.js中

const player = (props) => {
return ( 
        <View  key={props.id} style={styles.container}>
            <CheckBox 
                key= {props.id}
                onPress={() => props.handlePress(props.id)} 
                checked={props.checked} 
                size={30} 
                checkedColor="#ff7f00" 
                uncheckedColor="#ff7f00" 
            />
            <Text style={styles.name}>{props.fName} {props.lName}</Text>
        </View>
 );

}

谁能确定为什么我的复选框不起作用？请注意，当我用一个简单的方法替换handlePress方法时

console.log("pressed",id)

它的功能完全正常。