Insert button checkbox

Hi, 
I need to insert a checkbox in a column called "Approved". I was able to insert the checkbox but I am not able to fill in the box, when clicking above one of them the line is selected and not the box. Can you help me with this please?
I use the following function:

Function customizeCellFunction(cell data) {
if (data.type !== "header" && data.measure.uniqueName === "Aprovado") {
cell.style["text-align"] = "center";
cell.style = '<input type="checkbox" class="myinput" data-row-index="${data.rowIndex}" ${data.value === "Aprovado" ? "checked" : ""}>';
}
};

flexmonster.on("reportcomplete", function () {
const checkboxes = document.querySelectorAll(".myinput");
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", function () {
const rowIndex = parseInt(this.getAttribute("data-row-index"));
flexmonster.setCellValue({ rowIdx: rowIndex, colIdx: flexmonster.getMeasureIndex("Aprovado") }, this.checked ? "Aprovado" : "");