Multiple Checkbox value update - React JS

Question

After fetching all data from backend, I'm grouping the data by Date wise below is the code for it

 const [transactionsList, setTransactionsList] = useState<TransactionList | any>();
 const [groupedTransactionsList, setGroupedTransactionsList] = useState<TransactionsByDate[] | null>(null);
  const [selectedTransaction, setSelectedTransaction] = useState<any>([]);
      
const response = await postAPIRequestCall(`${API_URL_PREFIX}/cards/transactionList`,
              { AccountNumber: res.encryptedAccountNumber });
            if (response) {
              setTransactionsList(response.data);
              groupByDate(response.data);
            }

Below is the logic to group all date by date wise and storing the value to groupedTransactionsList

 const groupByDate = (response: TransactionList) => {
    of(...response.transactionDetails).pipe(
      groupBy((transaction: any) => transaction.transactionDate),
      mergeMap((group$) => group$.pipe(reduce((acc, cur) => [...acc, cur], [`${group$.key}`]))),
      map((arr) => ({ date: arr[0], transactions: arr.slice(1) } as TransactionsByDate)),
      toArray(),
    ).subscribe((p) => setGroupedTransactionsList(p));
  };

Inside the render method, I'm displaying the data by date wise

{groupedTransactionsList?.map((
              {
                date,
                transactions,
              },
              key,
            ) => (
              <div key={date}>
                <div className="date pb-1">{moment(date).format('ddd D MMM')}</div>
                {transactions.map((
                  transaction,
                  index,
                ) => (
                  <div className="col-12 content" key={transaction.transactionReferenceNumber}>
                    <div className="col-11 pl-0">
                      <Checkbox
                        checked={transaction.isChecked}
                        onChange={(name, vlaue, e) => handleCheckboxOnChange(
                          transaction,
                          e.target.checked,
                        )}
                      />
                    </div>
                  </div>
                ))}
              </div>
            ))}

On selection of each transaction, I calling this method handleCheckboxOnChange,

const handleCheckboxOnChange = (
    transactionDetails: TransactionDetail,
    isCheckeds: boolean,
  ) => {
    transactionsList.transactionDetails
      .filter((item: TransactionDetail) => item.transactionReferenceNumber === transactionDetails.transactionReferenceNumber)
      // eslint-disable-next-line no-param-reassign
      .map((item: TransactionDetail) => item.isChecked = isCheckeds);

    const selectedTransactions = transactionsList.transactionDetails
      .filter((item: TransactionDetail) => item.isChecked === true);
    setSelectedTransaction(selectedTransactions);

    groupByDate(transactionsList);
  };

Everything works fine and I'm getting expected results, but the problem is I'm calling groupByDate every time when user clicks on the check box. which is bad,

How do optimize my code & logic. Please guide me