I am developing a custom svg map that scrolls from both the x axis and y axis to a region in ReactJs

So I have a map-region.jsx which contains my svg map

And I am using the tag to give it an id

 const MapRegions = () => {
  return (
    <svg
      width="7115"
      height="3000"
      viewBox="0 0 9115 3921"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
//other paths...
      <g id="lagos">
        <path
          d="M4845.35 1925.77L4840.72 1926.7L4822.66 1894.27L4816.64 1893.34L4796.73 1909.55L4776.82 1901.22L4762.93 1899.36L4755.52 1903.53L4740.24 1902.61L4724.96 1915.11L4711.99 1916.04L4680.51 1900.75L4668.47 1907.7L4655.04 1907.24L4645.31 1896.12L4619.38 1885L4591.6 1888.71L4585.12 1895.19L4581.41 1911.87L4574 1923.92L4572.62 1950.32L4571.69 1960.05L4577.25 1977.66L4572.15 1989.24L4574.93 1997.12L4562.43 2015.65L4554.56 2024.45L4549.93 2042.98L4550.39 2061.98L4549 2109.23H4571.69H4591.6L4609.66 2128.69L4618.46 2150L4632.35 2168.07L4653.19 2169L4663.37 2162.51L4673.1 2163.9L4699.95 2153.25L4706.44 2132.4L4718.94 2104.14L4726.35 2103.68L4741.63 2086.53L4751.35 2086.07L4766.17 2098.12L4784.23 2087.92L4786.54 2075.88L4792.1 2063.83L4795.8 2049.01L4809.7 2036.96L4814.79 2016.11L4820.35 2009.63L4823.59 1994.34L4830.53 1975.81L4851.83 1952.64L4853.22 1942.91L4856 1937.82L4845.35 1925.77Z"
          fill="#f00"
          stroke="black"
          stroke-linejoin="round"
        />
      </g>
</svg>
  );
};

export default MapRegions;

I am tracking the id in my code so when I click on a button it scrolls to that id
I did that here in my MapDisplay.jsx

import React, { useState, useRef, useEffect } from "react";
import StateList from "./stateList";
import MapRegions from "./map-regions";

// import map from "../images/main-map.svg";

const Map = () => {
  const mapContainerRef = useRef(null);
  const [zoomLevel, setZoomLevel] = useState(1);

  const [selectedState, setSelectedState] = useState(null);

  // Receive state updates from the StateList
  const handleStateChange = (state) => {
    console.log("Received state in Map:", state);
    scrollToElement(state.name.toLowerCase()); // Scroll to the element
    setSelectedState(state);
  };

  const handleZoom = (event) => {
    const delta = event.deltaY > 0 ? -0.2 : 0.2;
    setZoomLevel(Math.max(0.5, Math.min(zoomLevel + delta, 2)));
  };

  useEffect(() => {
    const mapContainer = mapContainerRef.current;
    if (mapContainer) {
      mapContainer.addEventListener("wheel", handleZoom);

      return () => mapContainer.removeEventListener("wheel", handleZoom);
    }
  }, []);

  const scrollToElement = (id) => {
    const groupElement = document.getElementById(id);
    const pathElement = groupElement.querySelector("path");

    const boundingRect = pathElement.getBoundingClientRect();
    console.log("Bounding Rect:", boundingRect);

    const viewBoxScalingFactor = mapContainerRef.current.clientWidth / 9115;
    const centerOffsetTop =
      (boundingRect.top + boundingRect.height / 2) * viewBoxScalingFactor -
      mapContainerRef.current.clientHeight / 2;
    const centerOffsetLeft =
      (boundingRect.left + boundingRect.width / 2) * viewBoxScalingFactor -
      mapContainerRef.current.clientWidth / 2;

    mapContainerRef.current.scrollTo({
      top: centerOffsetTop,
      left: centerOffsetLeft,
      behavior: "smooth",
    });
    console.log(
      "mapContainerRef Client Height:",
      mapContainerRef.current.clientHeight
    );
    console.log(
      "mapContainerRef Client Width:",
      mapContainerRef.current.clientWidth
    );
  };

  return (
    <div className="relative">
      <div
        ref={mapContainerRef}
        className="w-full h-[500px] overflow-y-scroll overflow-x-scroll"
        // style={{ transform: `scale(${zoomLevel})` }}
      >
        <MapRegions />
      </div>

      <StateList
        scrollToElement={scrollToElement}
        onStateSelected={handleStateChange}
      />
    </div>
  );
};

export default Map;

This is exactly where I am reusing the MapDisplay

import React, { useState } from "react";
import MapDisplay from "./map-display";
import MapForm from "./sections/map-form";
import StateList from "./stateList";
import { statesData } from "./map-data";

const Map = () => {
  return (
    <div className="p-5 py-20 lg:p-20 flex justify-between items-center relative">
      <MapForm />
      <div className="w-[60%]">
        <MapDisplay />
      </div>
    </div>
  );
};

export default Map;

I also have a stateList.jsx where I have the states I want to scroll to when I click on the buttons

const StateList = ({ scrollToElement, onStateSelected }) => {
  const states = [
    {
      name: "Lagos",
      country: "Nigeria",
    },
    {
      name: "Kaduna",
      country: "Nigeria",
    },
    {
      name: "Birmingham",
      country: "UK",
    },
    {
      name: "Florida",
      country: "USA",
    },
    {
      name: "Dakar",
      country: "Senegal",
    },
  ];

  return (
    <div className="mt-8 absolute right-[250px] bottom-[10px]">
      <div className="bg-[#F6F1EE] p-5 rounded-lg">
        <div className="flex justify-between items-center">
          <p className="text-berkeleyBlue">Regional Office</p>
          {/* <button className="border border-berkeleyBlue px-5 p-1 rounded-full">
            View on Map
          </button> */}
        </div>
        <h1 className="text-3xl text-[#B3001B]">Dakar, Senegal</h1>
        <ul className="flex justify-center items-center gap-3 mt-8">
          {states.map((state) => (
            <li
              key={state.name}
              id={state.name.toLowerCase()}
              className="p-2 cursor-pointer border border-[#EEEEF0] bg-black text-white rounded-full px-5"
              onClick={() => {
                scrollToElement(state.name.toLowerCase());
                onStateSelected(state);
              }}
            >
              {state.name}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default StateList;

But the scrolling is not working, even when I print to the console. It prints the id of what I am clicking to the console but not scrolling to the region I want to scroll to.

Please how can I make this work