How to set X,Y coordinates for an object in MxGraph by mouse click on the map?

Question

Mouse

In the mxgraph engine, I found a mouse event, but it does not reflect the real coordinate of the map. Here is a code example where evt doesn't work for me. We need a different solution. It is required to get the coordinate of the map. You can check this by obtaining negative coordinates (probably).

In general, the task looks like this: the user selects a category of objects, he is shown a modal window with available SVG icons for placement. After the SVG is clicked, the icon is placed where the user clicks. I know that there is a standard Drag&Drop option in MxGraph, but it doesn't suit us because of the specifics of the project. We need to place a new element on a mouse click on the map at the assigned X, Y coordinates of the mouse on the map.

The code below shows the coordinates that we found in MxGraph, but they do not allow us to place the object on click.

this.graph.addListener(MxEvent.CLICK, function(sender, evt)){
        console.log('evtOffsetX: ', evt.properties.event.offsetX)
        console.log('evtOffsetY: ', evt.properties.event.offsetY)
    }
    
    
    this.graph.getSelectionModel().addListener(MxEvent.CHANGE, function(vertex)){
        console.log('vertexCenterX: ', vertex.cells[0].geometry.getCenterX());
        console.log('vertexCenterY: ', vertex.cells[0].geometry.getCenterY());
        console.log('vertexHeight: ', vertex.cells[0].geometry.height);
        console.log('vertexWidth: ', vertex.cells[0].geometry.width);
        console.log('vertexX: ', vertex.cells[0].geometry.x);
        console.log('vertexY: ', vertex.cells[0].geometry.y);
    }