我正在动态渲染一些复选框，但目前我只能选中第一个复选框，而所有其他复选框都操作第一个复选框。如何让这些复选框彼此独立工作？

这是 React 中的 typescript。我尝试更改我在函数中引用的接口，以为我引用了错误的东西，但这些都不起作用。

这是函数：

handleCheckboxClick = (entitlement: IApiEntitlements, checked: boolean): void => {
    if (checked === true) {
        this.selectedEntitlementIDs.push(entitlement.id);
    } else {
        const index: number = this.selectedEntitlementIDs.indexOf(entitlement.id);
        this.selectedEntitlementIDs.splice(index, 1);
    }
    //tslint:disable-next-line:prefer-const
    let entitlementChecked: IEntitlementChecked = this.state.entitlementChecked;
    entitlementChecked[entitlement.id] = checked;
    let selectAll: boolean = false;
    if (this.selectedEntitlementIDs.length === this.state.responses.apiResponses.apiClients.length) {
        selectAll = true;
    }
    this.setState({
        entitlementChecked: entitlementChecked,
        selectAll: selectAll
    });
    console.log(this.selectedEntitlementIDs, 'hi');
    console.log(entitlementChecked, 'hello');
}

这是它被调用的地方：

return (
   <Checkbox
     checked={this.state.entitlementChecked[entitlement.id]}
     data-ci-key={entitlement.id}
     id='api-checkbox'
     key={entitlement.id}
     labelText={entitlement.label}
     onChange={this.handleCheckboxClick}>
   </Checkbox>
);

我希望每个复选框都能被选中，但目前第一个复选框有效，所有其他复选框都选中或取消选中第一个复选框。