Frappe Gannt Custom Pop Up not changing content

Hello,

I am using VS2022 and I downloaded Frappe Gantt from github. Regarding this code

@page

<h2>Frappe Gantt Chart Demo</h2>

<div id="gantt"></div>

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Inline task data for Frappe Gantt
        const tasks = [
            {
                id: "1",
                name: "Task 1",
                start: "2024-11-12",
                end: "2024-11-14",
                progress: 30,
                dependencies: ""
            },
            {
                id: "2",
                name: "Task 2",
                start: "2024-11-13",
                end: "2024-11-15",
                progress: 50,
                dependencies: "1"
            },
            {
                id: "3",
                name: "Task 3",
                start: "2024-11-14",
                end: "2024-11-17",
                progress: 75,
                dependencies: "1,2"
            }
        ];

        // Initialize Frappe Gantt with the task data
        const gantt = new Gantt("#gantt", tasks, {
            view_mode: 'Week',
            custom_popup_html: function (task) {
                return `
                <div class="card" style="width: 10rem;">
                  <div class="card-body">
                    <h6>${task.name}</h6>
                    <p>Expected to finish by ${task.end}</p>
                    <p>${task.progress}% completed!</p>
                  </div>
                </div>
              `;
            }
        });
    });
</script>

I should be able to change the content of the Custom Pop Up window, but no change is visible. Also if I try running index.html from gantt-master.zip it does not work. I must be missing something. Can anybody give me a help here?

Thank you very much!