How to get correct MouseHover Coordinates on datamaps - reactjs

Question

I am using DataMap, unlike the normal view for a map, I turned the map upside down, When mouseover, the tooltip location doesn't correspond, to the location of the mouse when I mouseover
I have tried different codes, in other to get accurate coordinates, but none is giving me what I need.
In the map react component
<Map mapRef= {this.myMap} makeMouseMove={this._onMouseMove} />
1st try
_onMouseMove = (e) => {
if (document.querySelector('.hoverinfo')) {
let mapTooltip = document.querySelector('.datamaps-hoverover');
let rect = e.target.getBoundingClientRect();
mapTooltip.style.left = e.clientX - rect.left + 'px';
mapTooltip.style.top = e.clientY - rect.top + 'px';
}
}
2nd Try
_onMouseMove = (e) => {
if (document.querySelector('.hoverinfo')) {
let mapTooltip = document.querySelector('.datamaps-hoverover');
mapTooltip.style.left = e.pageX - mapTooltip.offsetLeft+'px';
mapTooltip.style.left = e.pageY - mapTooltip.offsetTop+'px';
}
}
Unfortunately, I have not been able to achieve what I want to achieve, I would appreciate if someone that has experience handling this Datamap issue helps me with a clue.

Answer 1

In case someone else is having this type of issue, this is what I did to resolve it, apparently, the left value is correct, and there was no need for me to modify it.
_onMouseMove = (e) => {
if (document.querySelector('.hoverinfo')){
let mapTooltip = document.querySelector('.datamaps-hoverover');
let mapHoverSVG = document.querySelector('svg');
let point = mapHoverSVG.createSVGPoint();
point.x = e.clientX;
point.y = e.clientY;
let cursor = point.matrixTransform(mapHoverSVG.getScreenCTM().inverse());
mapTooltip.style.top = (cursor.y + 16) + "px";
console.log(cursor.y);
}
}