Enable Disable multiple checkboxes in React Bootstrap Table Next

I'm having a hard time trying to enable/disable checkboxes using Bootstrap Table Next and React.

For the checkboxes I'm using a column formatter like this:

  formatter: (cell, row) => {
      return (
         <div className='text-right togglebox form-check form-check-inline'>
            <input type="checkbox" checked={ row.isInMaintenanceMode } disabled={ row.isReadOnly } className="form-check-input" onChange={(e) => {
                                row.isReadOnly = true;
                                if (row.isInMaintenanceMode) {
                                    this.props.update(row.name, { "/redirect" : false });
                                } else {
                                    this.setState({ isModalOpen: true, server: row.name, isInMaintenanceMode: !row.isInMaintenanceMode });
                                }
                            }} 
              />
          </div>
       );
   },

Updating the maintenance mode status takes a while and I'd like to disable the checkbox to prevent multiple clicks. Setting row.isReadOnly to true doesn't do anything and no changes are reflected in the column, the checkbox will only be disabled if the isReadOnly property is initially set to true.

Additionally, before setting the maintenance mode to true (NOT the isReadOnly property) the user is presented with a confirmation modal which then calls the update method and then automatically closes, so I'd like to be able to also disable the checkbox from the modal itself.

I've tried using state but I'm not sure it's the right approach as there are potentially hundreds if not thousands of records.

Can anyone tell me what I'm doing wrong?

Thanks