SVG map zoom and center with fixed height

I'mt trying to implement zoom and center to the clicked element on the world map. The problem is, I want to achieve it with a fixed height, and don't know how should I calc this height to the viewbox. Here is my current solution on codepen:

const handleMapZoom = (e) => {
  const map = document.getElementById('map');
  const mapBounding = map.getBBox();
  const targetBounding = e.getBBox();

  const scale = Math.min(
    mapBounding.width / targetBounding.width,
    mapBounding.height / targetBounding.height,
    4,
  );
  const transformOriginX = targetBounding.x + targetBounding.width / 2;
  const transformOriginY = targetBounding.y + targetBounding.height / 2;
  const transformOriginXPercent =
    (50 - (transformOriginX * 100) / mapBounding.width) * scale;
  const transformOriginYPercent =
    (50 - (transformOriginY * 100) / mapBounding.height) * scale;
  const scaleText = `scale(${scale})`;
  const translateT = `translate(${transformOriginXPercent}%, ${transformOriginYPercent}%)`;

  map.style.transform = `${translateT} ${scaleText}`;
  e.style.fill = 'red'
};

https://codepen.io/abra-qyk/pen/XWpBqbj?editors=1111

What am I doing wrong? what is the problem with these calculations? I would be very grateful for help and explanation.