How can I change the staus of task, when I filter tasks in the project ToDoList?

Question

I'm trying to change status of task, when I filter tasks on "All", "Active" and "Completed". When the button "All" is chosen, all work. But when buttons "Active" and "Completed" are focused, it works incrorrectly. Please, help me to solve this problem...

//variables
let tasks;
if(!localStorage.tasks){
    tasks = [];
}
else {
    tasks = JSON.parse(localStorage.getItem('tasks'));
}

//structure for writing into LocalStorage
function Task(description){
    this.description = description;
    this.completed = false;
}

function of creating new task

const createDuty = (task, index) => {
    return `
    <li ondblclick = "editTask(${index})" class = "todo-item ${task.completed ? 'checked' : ''}">
        <label class="isDone"><input onclick = "completeTask(${index})" type="checkbox" name=" "class="checkboxDone" ${task.completed ? 'checked' : ''}/>
        <span class = "spanCompleted ${task.completed ? 'completed' : ''}"></span></label>
        ${task.description}
        <button onclick = "deleteTask(${index})" class="deleteDuty"><img src="icons/x.svg" alt="" class=""></button>
    </li>
    `
}

function of showing tasks on the page

const initializeComponent = () => {
    todoList.innerHTML = "";
    if (tasks.length > 0) {
        tasks.forEach((item, index) => {
            todoList.innerHTML += createDuty(item, index);
        });
    }
}

function of writing tasks to LocalStorage

const writeToLocal = () => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

function of showing all tasks

allDuties.addEventListener('click',
    function addAllTasks(){
        completedDuties.classList.remove("focus");
        activeDuties.classList.remove("focus");
        allDuties.classList.add("focus");
        todoList.innerHTML = "";
        initializeComponent();
        writeToLocal();
    }
)

function of showing completed tasks

completedDuties.addEventListener('click',
    function addCompletedTasks(){
        //this add and remove are needed for function of completing tasks
        allDuties.classList.remove("focus");
        activeDuties.classList.remove("focus");
        completedDuties.classList.add("focus");
        todoList.innerHTML = "";
        if (tasks.length > 0){
            if(tasks.filter(x => x.completed == true)){
                tasks.filter(x => x.completed == true).forEach((item, index) => {
                todoList.innerHTML += createDuty(item, index);
                });
            }
        }
        writeToLocal();
    }
)

function of showing active tasks

activeDuties.addEventListener('click',
    function addActiveTasks(){
        allDuties.classList.remove("focus");
        completedDuties.classList.remove("focus");
        activeDuties.classList.add("focus");
        todoList.innerHTML = "";
        if (tasks.length > 0){
            if(tasks.filter(x => x.completed == false)){
                tasks.filter(x => x.completed == false).forEach((item, index) => {
                todoList.innerHTML += createDuty(item, index);
                });
            }
        }
        writeToLocal();
    }
)

and finally function of completing task

const completeTask = index => {
    tasks[index].completed = !tasks[index].completed;
    todoItems[index].classList.toggle('completed');
    writeToLocal();
    if(allDuties.classList.contains("focus")){
        initializeComponent();
    }
    if(activeDuties.classList.contains("focus")){
        todoList.innerHTML = "";
        if (tasks.length > 0){
            tasks.filter(x => x.completed == false).forEach((item, index) => {
            todoList.innerHTML += createDuty(item, index);
            });
        }
    }
    if(completedDuties.classList.contains("focus")){
        todoList.innerHTML = "";
        if (tasks.length > 0){
            tasks.filter(x => x.completed == true).forEach((item, index) => {
            todoList.innerHTML += createDuty(item, index);
            });
        }
    }
}