index array checkbox not functioning

The checkbox that is created next to the task can not be set to the checked position which would create a line across the task. When opening console I don’t get any errors only an issue which is:

(A form field element has neither an id nor a name attribute)

Which when clicking on the checkbox increments up.
I am not sure how to assign a name or attribute to the checkbox as this is what i assume the problem is.

This is the function that would create the check box and list item in the java script file.

function renderTasks () {
    const taskList = document.getElementById("added-task")
    taskList.innerHTML = "";
    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = task.completed;
        checkbox.addEventListener("change", () => toggleTask(index));
        li.appendChild(checkbox);

This is the body from the index.html file

<div class="container">
    <input type="text" id="addTaskInput" placeholder="Add Task">
    <button class="add-task-btn" onclick="addTask()">Add Task</button>
    <ul id="added-task"></ul>
</div>

This is the style sheet that crosses off the listed item.

.task.completed {
    text-decoration: line-through;
    color: #ccc;
}