How to run a onClick function inside inner HTML in Class Javascript?

I’m having trouble using Class Javascript. so I want to pass the looped project id. How do I execute onClick with the handleProject function? for test I use alert.
The following code produces an “unexpected end of input” error

import axios from "axios";

export class ProjectPanel extends DockingPanel {
  constructor(viewer, container, id, title, options, projects) {
    super(container, id, title, options);
    this.viewer = viewer;
    this.options = options;
    // docking panel
    this.container.classList.add("docking-panel-container-solid-color-a");
    this.container.style.cssText = `
          top: 10px;
          left: 10px;
          width: 300px;
          padding: 10px;
          min-height: 300px;
          resize: auto;
        `;
    this.projects = projects;
    if (this.projects) {
      this.updateProjectList(this.projects);
    }
  }

  updateProjectList(projects) {
    console.log(projects);
    this.containerProject = document.createElement("div");
    this.containerProject.className = "containerProject";
    this.container.append(this.containerProject);
    if (projects) {
      this.containerProject.innerHTML =
        "<div >" +
        projects
          .map((project) => {
            return (
              `<div class='button-bee-project glyphicon glyphicon-triangle-right' onclick=${this.handleProject(project.id)}>` +
              project.name +
              "</div>"
            );
          })
          .join("") +
        "</div>";
    } else {
      this.containerProject.innerHTML = `
         <div>Please Login</div>
          `;
    }
  }

  handleProject(id) {
    alert(`HELLO ${id}`);
  }
}