Add marker on clicking openseadragon viewer

I want to basically do what is asked in this link. However I have a few questions, is canvas-click event predefined is openseadragon? Also this method gives me errors Cannot read property of null (reading 'addHandler'). Is there any other method to add marker to the clicking point in openseadragon viewer.

EDIT1: Apparently i was calling addHandler before adding an image to osd viewer. So this situation is fixed now. So now I have an icon that I want to add at the point of click on viewer.

EDIT2: Okay so the method mentioned in the above answer worked. But I had to declare an img tag and pass its id to addOverlay method. Also it seems we can add label to only 1 point using this. What I have is an icon (chakraui icon precisely) and want to attach that to the viewer multiple times. So everytime I click on viewer it should attach a new instance of icon to the point of click.

If you want to make a new one each time, you'll need to create the overlay element yourself rather than referring to it by ID.

viewer.addHandler('canvas-click', function(event) {
  var viewportPoint = viewer.viewport.pointFromPixel(event.position);  
  var element = document.createElement('div');
  element.className = 'my-icon';
  viewer.addOverlay({
    element: element,
    location: viewportPoint
  });
});

I haven't tested this code but this should be the basic idea.