How can I update the underlying data value of checkbox on click

I am using Office Fabric React in an spfx web part and within a MarqueeSelection /DetailsList in each row have a checkbox to represent a boolean value, On click the default callback function writes out to log whether the isChecked value is true/false.

How can I correctly wire up my component so that it correctly updates the value of the line data on click?

I have been unable to overload the bound function to pass an identifier value to update the value.

the component output is :

the function binding is: this._onCheckboxChange = this._onCheckboxChange.bind(this);

the callback function is: private _onCheckboxChange(ev: React.FormEvent, isChecked: boolean): void { console.log(The option has been changed to ${isChecked}.); }

I have been unable to overload the bound function to pass an identifier value to update the value.

I have also tried to wrap it in a span tag and fire an event on click

The end result should ideally update the 'Displayed' value of the associated object in the array of data to reflect the change in boolean value.