Get translated SVG Point with svgpanzoom

Question

In trying to get the SVG point from the mouse in my Blazor application, im doing this in razor page

public async Task SvgElementOnMouseMove(MouseEventArgs e)
{
    var point = jsInProcess3.Invoke<string>("getSVG_XY", refSvgElement, e.ClientX, e.ClientY);
}    
            

And in the javascript

window.getSVG_XY = (svg, x, y) => {
   var pt = svg.createSVGPoint();
   pt.x = x;
   pt.y = y;
   pt = pt.matrixTransform(svg.getScreenCTM().inverse());
   return pt.x + " " + pt.y;
}

but using svg-pan-zoom library, im having trouble getting the correct SVG point, I have tried different variations of

  var pan = window.zoomCanvas.getPan();
  var zoom = window.zoomCanvas.getZoom();
  var matrix = window.zoomCanvas.viewport.getCTM();
  svgPoint = svgPoint.matrixTransform(window.CurrentCTM.inverse());
  window.zoomCanvas.onUpdatedCTM: function (ctm) { window.CurrentCTM = ctm; }

but the point is always way out of bounds, how can I get get correct point when user is panning and zooming? My SVG has a viewport set and works fine with pan and zoom just returning incorrect point

I have also tried this, and it's alot closer but still off by some margin (getting CTM of viewport group)

 var mainGroup = svg.getElementById("viewport");
 pt = pt.matrixTransform(mainGroup.getCTM().inverse());