this is our code but this code is give me the coordinates according to the body relative but when i change the zoom then its gives me different values i want to get coordinates and save in my backend that cannot be change this is my code

function FindPosition(oElement) {
    console.log(oElement);
    console.log(oElement.pageX);
    if (typeof (oElement.offsetParent) != "undefined") {
      for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
        posX += oElement.offsetLeft;
        posY += oElement.offsetTop;
      }
      return [posX, posY];
    }
    else {
      return [oElement.x, oElement.y];
    }
  }

  function GetCoordinates(e) {
    var PosX = 0;
    var PosY = 0;
    var ImgPos;
    ImgPos = FindPosition(myImg.current);
    // console.log(document.documentElement.scrollTop);
    console.log(myImg);
    if (!e) {
      var e = window.event
    };
    if (e.pageX || e.pageY) {
      PosX = e.pageX;
      PosY = e.pageY;
    }
    else if (e.clientX || e.clientY) {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
    }
    PosX = PosX - ImgPos[0];
    PosY = PosY - ImgPos[1];

  }

here is jsx which is written in react js

      <div className="map" ref={"Here is map image"} onMouseDown={GetCoordinates}>
        <img className='mapImage' src={map} alt="" />
        <RoomIcon className="markerIcon" />
      </div>

this is the css code

.map {
  /* height: 100px; */
  text-align: center;
  margin: auto;
  /* overflow: scroll; */
  margin-top: 18px;
  position: relative;
}

.mapForm .map img {
  margin-top: 18px;
  /* width: ; */
  /* width: 1900px; */
  /* zoom: 150%; */
}

.mapImage {
  width: 600px;
  /* zoom: 600%; */
}

.markerIcon {
  z-index: 5;
  position: absolute;
  color: #e24e40;
  left: 30px;
  top: 30px;
}