React update checkbox from object value

I'm trying to control a checkbox by using the value property that is coming from tableData. And by default the value is true.

let newData = newRes.data.map((e) => {
        return {
          ...e,
          installmentChecked: true,
          lateFeeChecked: true,
          depositChecked: true,
          collectionChecked: true,
        };
      });
     setTableData(newData);

After I mapped the data, I return the input like this.

const { data, index } = props;
return(
...
<input
  type="checkbox"
  value={latefee}
  checked={data?.lateFeeChecked}
  onChange={() => onChangeCheckbox('lateFeeChecked', index,data?.lateFeeChecked)}
/>
...

And this how I handle the value of the object.

const onChangeCheckbox = (key, index,status) => {
    tableData[index][key] = !tableData[index][key];
    console.log(tableData[index][key], 'props key');
    console.log(status, 'status');
  };

The problem that I'm getting is, the checkbox won't change at all. When I click, the console says.

false 'props key'
true 'status'

Is there any problem with my code? Or maybe anyone could gimme a better way to handle a checkbox in React? Appreciate any kind of responses, thanks before.