Dynamically added checkbox is not clickable when inserted to a html table (typescript)

I am trying to create a simple website that displays bank transactions on credit card (side project for learning TS and html).

The website displays all transactions between two dates (after dates are chosen) in a dynamically created table and it also creates a column with checkboxes to choose which transactions should be submitted for approval (uppon pressing a dedicated button for approval, the checked transactions are posted through restful api to an independant backend service).

The table is formed through the typescript correctly with all it's rows and correct data, but when I add the checkboxes, they don't respond to clicks (impossible to check / uncheck).

This is the code for the dynamic addition of rows to the table:

const addCells = (table: HTMLElement, currTransaction:any, color:string) => {
  const descriptors = ["Description", "TransactionDate", "Amount", "Currency", "Status"];
  const row = document.createElement("tr");
  for (let i in descriptors) {
    const createdCell = createCell(currTransaction, descriptors[i]);
    row.appendChild(createdCell);
  }

  applyRowStyling(row, color);
  addCheckBox(row, currTransaction);

  table.appendChild(row);
}

const createCell = (currTransaction:any, currDescriptor:string):HTMLTableCellElement => {
  const tableCell = document.createElement("td");
  tableCell.style.border = "black solid 1px";
  const descriptorText = document.createTextNode(currTransaction[currDescriptor]);
  tableCell.appendChild(descriptorText);
  return tableCell;
}

const addCheckBox = (row:HTMLTableRowElement, currTransaction:any) => {
  const tableCell:HTMLTableCellElement = document.createElement("td");
  tableCell.style.border = "black solid 1px";
  const checkbox:HTMLInputElement = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  checkbox.checked = false;
  checkbox.disabled = false;
  // checkbox.name="approvalCheckbox"
  checkbox.id = currTransaction['TransNum'];

  tableCell.appendChild(checkbox);
  checkBoxes.push(checkbox);

  row.appendChild(tableCell);
}

const applyRowStyling = (row:HTMLTableRowElement, color:string) => {
  row.style.backgroundColor = color;
  row.style.border = 'black solid 1px';
  row.style.textAlign = 'center';
}

const checkBoxes = [];

const addCells = (table/*: HTMLElement*/, currTransaction/*: any*/, color/*: string*/) => {
    const descriptors = [
        "Description",
        "TransactionDate",
        "Amount",
        "Currency",
        "Status",
    ];
    const row = document.createElement("tr");
    for (let i in descriptors) {
        const createdCell = createCell(currTransaction, descriptors[i]);
        row.appendChild(createdCell);
    }

    applyRowStyling(row, color);
    addCheckBox(row, currTransaction);

    table.appendChild(row);
};

const createCell = (
    currTransaction/*: any*/,
    currDescriptor/*: string*/,
)/*: HTMLTableCellElement*/ => {
    const tableCell = document.createElement("td");
    tableCell.style.border = "black solid 1px";
    const descriptorText = document.createTextNode(
        currTransaction[currDescriptor]
    );
    tableCell.appendChild(descriptorText);
    return tableCell;
};

const addCheckBox = (row/*: HTMLTableRowElement*/, currTransaction/*: any*/) => {
    const tableCell/*: HTMLTableCellElement*/ = document.createElement("td");
    tableCell.style.border = "black solid 1px";
    const checkbox/*: HTMLInputElement*/ = document.createElement("input");
    checkbox.setAttribute("type", "checkbox");
    checkbox.checked = false;
    checkbox.disabled = false;
    // checkbox.name="approvalCheckbox"
    checkbox.id = currTransaction["TransNum"];

    tableCell.appendChild(checkbox);
    checkBoxes.push(checkbox);

    row.appendChild(tableCell);
};

const applyRowStyling = (row/*: HTMLTableRowElement*/, color/*: string*/) => {
    row.style.backgroundColor = color;
    row.style.border = "black solid 1px";
    row.style.textAlign = "center";
};

addCells(
    document.getElementById("the-table"),
    {
        "Description": "The description",
        "TransactionDate": new Date(),
        "Amount": 42,
        "Currency": "USD",
        "Status": "pending",
    },
    "white"
);

#the-table {
    margin-top: 50px;
}

<table id="the-table"></table>

I've tried to manually create a checkbox in the table in the html file in the form:

        <tr>
          <td><input type="checkbox"></td>
        </tr>

Which caused the checkbox to work (but of course does not help as I need the checkboxes to be added dynamically).

I tried to use addEventListener and onclick on both the element and the checkbox and it still does not respond (does not call the callback function I registered).