The toggleLid function defined in my class is not working when called in an event listener. The individual 'backpack' objects are defined elsewhere. The browser is not throwing any errors in the console. Any advice is appreciated!

function Backpack (
    name,
    lidOpen
    
) {
    this.name = name;
    this.lidOpen = lidOpen;

    this.toggleLid = (lidStatus) => {
        this.lidOpen = lidStatus;
    };
};

const backPackList = [bag1, bag2];

const content = backPackList.map((backpack) => {
    let backpackArticle = document.createElement("article");
    backpackArticle.classList.add("backpack");
    backpackArticle.setAttribute("id", backpack.id)
    backpackArticle.innerHTML = `
    <h1>${backpack.name}<h1>
    <h2>${backpack.lidOpen}<h1>
    <button class='lid-toggle'>Toggle Lid</button>
    `;

    const button = backpackArticle.querySelector(".lid-toggle")

    button.addEventListener("click", () => {
        backpack.toggleLid(!backpack.lidOpen)
    })

    return backpackArticle;
});