Endless event propagation with onmouseover and onmouseout event?

I’m working on making a checkbox appear when a user hovers over a table’s first data cell.
I used “firstDataCell.onmouseover” to add the checkbox and “firstDataCell.onmouseout” to remove it which works as the checkbox appears but you are unable to click on the checkbox as the events propagate when you’ve hovered on it. I think the solution would be in some way to stop the other event propagation while one event is active but can’t seem to work it out with “.stopPropagation()”.
Code bellow:

let taskTable=document.querySelector('#table_1')
let tableBody=taskTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr')
let tableRowArr=[]
for(let i=0;i<tableBody.length;i++){
    tableRowArr.push(tableBody[i])
}
tableRowArr.forEach((row,index) => {
    let tableRowFirstDataCell=row.getElementsByTagName("td")[0]
    let cellData=tableRowFirstDataCell.innerHTML
    tableCellsData.push(cellData)
    tableRowFirstDataCell.onmouseover=addCheckboxes
})

function addCheckboxes(event){
        event.currentTarget.onmouseover=()=>{}
        event.currentTarget.innerHTML=""
        let checkBox=document.createElement("input")
        checkBox.setAttribute("type","checkbox")
        checkBox.setAttribute("class","check")
        // checkBox.setAttribute("") //<-----  Add styling to checkboxes
        // checkBox.addEventListener("onclick",deleteTask(id))
        event.currentTarget.appendChild(checkBox)
        event.currentTarget.onmouseout=removeCheckboxes
}
function removeCheckboxes(event) {
        event.currentTarget.onmouseout=()=>{}
        event.currentTarget.innerHTML=""
        event.currentTarget.innerHTML=tableCellsData[1]
        event.currentTarget.onmouseover=addCheckboxes
}