If Statement executing some code, but not the rest - JavaScript

I have this weird issue where my if statement is only executing part of the code. I've asked several people now and no one seems to know why it's doing this. From the code below, when the taskStartBtn.innerHTML is "Start" and you click the button, it will execute startTimer() but doesn't change the innerHTML. Same goes if you click it while the timer is running. It will execute pauseTimer() as if the innerHTML is "Pause", but it never actually changes the innerHTML.

    const taskStartBtns = document.querySelectorAll(".startBtn");
    taskStartBtns.forEach((taskStartBtn) => {
        taskStartBtn.addEventListener("click", () => {
            if (taskStartBtn.innerHTML === "Start") {
                taskStartBtn.innerHTML = "Pause";
                startTimer(todo.task);
            } else if (taskStartBtn.innerHTML === "Pause") {
                taskStartBtn.innerHTML = "Resume";
                pauseTimer();
            } else if (taskStartBtn.innerHTML === "Resume") {
                startTimer(todo.task);
            }
        });
    });

I have a similar if statement earlier in my code that works flawlessly. Here is my codepen in case you need to see the full code: https://codepen.io/redliz5808/pen/WNoRvaX