Why the toggle button is not working correctly?

so I’m trying to build an extension manager page and I solved an issue where when I try to activate/deactivate one of the extension it works when I flip the switch right after the page loads, however once one of the filter buttons is clicked, the toggle stops working

const cards = document.querySelector(".cards");
const all = document.getElementById("all");
const inactive = document.getElementById("inactive");
const active = document.getElementById("active");
const modeToggle = document.getElementById("mode-toggle");

let extensions = [];
let activated = [];
let inactivated = [];

fetch("./data.json")
    .then(response => response.json())
    .then(data => {
        extensions = data;
        showData(extensions);
        console.log(extensions);
    })
    .catch(error => {
        console.log("Error fetching data");
    });

class Extension {
    display(dataArr) {
        cards.innerHTML = `
            ${dataArr.map(extension => `
            <div class="card extension-card">
                <div class="ext-info">
                    <img src="${extension.logo}" alt="Extension logo" width="60">
                    <div class="text">
                        <h3 class="extension-title">${extension.name}</h3>
                        <p class="extension-description">${extension.description}</p>
                    </div>
                </div>
                <div class="functions">
                    <button class="btn btn-outline-secondary remove" id="remove">Remove</button>
                    <label class="switch">
                        <input type="checkbox" class="activate" data-id="${extension.id}">
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
            `).join("")}
        `;
    }

    setCheckboxState(dataArr) {
        const activateToggles = document.getElementsByClassName("activate");

        dataArr.forEach(extension => {
            [...activateToggles].forEach(toggle => {
                if (toggle.getAttribute("data-id") === extension.id) {
                    toggle.checked = extension.isActive;
                }
            });
        });
    }

    static updateArrays() {
        activated = extensions.filter(ext => ext.isActive);
        inactivated = extensions.filter(ext => !ext.isActive);
    }
}

const showData = (dataArr) => {
    dataArr.forEach((extensionData) => {
        const extension = new Extension();
        extension.display(dataArr);
        extension.setCheckboxState(dataArr);

        const activateToggles = document.getElementsByClassName("activate");
        [...activateToggles].forEach(toggle => {
            const extensionId = toggle.getAttribute("data-id");
            const extension = extensions.find(ext => ext.id === extensionId);

            toggle.addEventListener("change", () => {
                extension.isActive = toggle.checked;
                Extension.updateArrays(); // Update arrays after each toggle
            });
        });

        // Event listeners for filtering
        all.addEventListener("click", () => {
            cards.innerHTML = "";
            extension.display(extensions);
            extension.setCheckboxState(extensions);
        });

        active.addEventListener("click", () => {
            cards.innerHTML = "";
            Extension.updateArrays(); // Update arrays before filtering
            extension.display(activated);
            extension.setCheckboxState(activated);
        });

        inactive.addEventListener("click", () => {
            cards.innerHTML = "";
            Extension.updateArrays(); // Update arrays before filtering
            extension.display(inactivated);
            extension.setCheckboxState(inactivated);
        });
    });
};

does anyone have an idea of how to solve this issue?