Incorrect rendering of controlled Fluent UI Checkbox components

I have a form that interacts with a database via REST API and presents several controlled Fluent UI components. For a multi-choice field, I built a component that displays a Stack with an arbitrary number of controlled Checkbox components. Below is the content of the render function.

const choices = this.props.Field.Choices.results;
return (<>
  <Fabric.Stack {...this.props.stackTokens}>
    {choices.map((choice) => (
      <Fabric.Checkbox label={choice} checked={this.state.value[choice]}
        onChange={this.handleChange(choice)} key={choice} />
    ))}
  </Fabric.Stack>
  <div
    className="errorMessage"
    id={`FormFieldDescription--${this.context.Item?.Id}__${this.props.FieldName}`}
    role="alert"
    style=>
    {this.props.errorMessage}
  </div>
</>);

After the form retrieves the data via REST API, this component uses that data to update its state. While the state is correctly updated and the correct values are being passed to the props for each Checkbox component, the UI is misleading. For instance, the checked values below are set to false, true, false, false, and false respectively, according to the React Components inspector in Chrome DevTools.

Obviously, while the props are correctly set, the user is presented with five unticked checkboxes. When the user clicks the checkbox that should have been ticked, the state is correctly updated to reflect that all five checkboxes are unticked. This is what it looks like after the user clicks on the second checkbox.

The user interacts with the Checkbox components and they behave as expected, but the underlying values are exactly inverted for any where the initial checked property was set to true.