Как установить и снять несколько флажков - React + JavaScript

Question

У меня есть компонент React, который является таблицей и имеет несколько строк, каждая с флажком. Сам компонент имеет две функции onClick, которая возвращает данные текущей строки, onChange, которая проверяет или , снимает флажок текущую строку и возвращает текущие идентификаторы выбранных / проверенных строк, т.е. ['1', '2', '3']. Я хочу, чтобы отображалось количество выбранных пользователем строк, и это должно отображаться в заголовке столбца таблицы. Короче говоря, таблица имеет несколько столбцов с разными заголовками, и я хочу добавить этот ['1', '2', '3'].length в этот заголовок.

Когда пользователь выбирает строку, я могу добавить данные, сохранив данные в хранилище избыточных данных, и по мере обновления данных хранилища избыточных данных этот компонент <Table /> повторно рендерится, что означает, что он теряет текущее проверенное состояние, но заголовок обновляется новыми данными, в которых указано, сколько строк выбрано. Проще говоря, я хочу сохранить состояние текущей таблицы проверенных / непроверенных строк (попытался обновить приставку), но выдает ошибку.

Uncaught (in promise) Invariant Violation: A state mutation was detected between dispatches, in the path fineList.0.selected.

Мой код

const historyOnChange = (event: any, props: IVariables) => {
  let currentList = props.fineList;
  let currentEvent = event;
  currentList.map((item: any, idx: any) => {
    event.map((eItem: any) => {
      if ((idx + 1).toString() === eItem && !item.selected) {
        item.selected = true;
      } else if ((idx + 1).toString() !== eItem && item.selected) {
        item.selected = false;
      }
    });
  });
  props.actions.fineList.update([...currentList]);
};

const init = async (props: IVariables) => {
  //Called when the component loads
  props.actions.fineList.update([
    {
      FineNumber: '119876543',
      source: '888',
      Date: '12 Dec 2019',
      FineType: 'Payable',
      id: '1',
      PlateNumber: '98765',
      Price: '200',
      LateCharges: 'AED',
      DiplomaticPlateNo: '0',
      PlateColour: 'Eleventh category ',
      PlateType: 'Private',
      PlateSource: '',
      OwnerTrafficNo: '1130144535',
      DriverTrafficNo: 'N/A',
      DriverLicenceNo: 'N/A',
      DriverLicenceSource: 'N/A',
      MaterialDescription: 'Exceeding speed limit by more than 10 km/h',
      AmountBeforeDiscount: 'AED 700',
    },
        {
      FineNumber: '119876543',
      source: '888',
      Date: '12 Dec 2019',
      FineType: 'Payable',
      id: '1',
      PlateNumber: '98765',
      Price: '200',
      LateCharges: 'AED',
      DiplomaticPlateNo: '0',
      PlateColour: 'Eleventh category ',
      PlateType: 'Private',
      PlateSource: '',
      OwnerTrafficNo: '1130144535',
      DriverTrafficNo: 'N/A',
      DriverLicenceNo: 'N/A',
      DriverLicenceSource: 'N/A',
      MaterialDescription: 'Exceeding speed limit by more than 10 km/h',
      AmountBeforeDiscount: 'AED 700',
    },
        {
      FineNumber: '119876543',
      source: '888',
      Date: '12 Dec 2019',
      FineType: 'Payable',
      id: '1',
      PlateNumber: '98765',
      Price: '200',
      LateCharges: 'AED',
      DiplomaticPlateNo: '0',
      PlateColour: 'Eleventh category ',
      PlateType: 'Private',
      PlateSource: '',
      OwnerTrafficNo: '1130144535',
      DriverTrafficNo: 'N/A',
      DriverLicenceNo: 'N/A',
      DriverLicenceSource: 'N/A',
      MaterialDescription: 'Exceeding speed limit by more than 10 km/h',
      AmountBeforeDiscount: 'AED 700',
    },
  ]);
};