Position of the Panning and Zoom to be saved in localstorage on d3-org-chart library

Question

I am using "d3-org-chart" library for creating org chart. I have used it inbuilt methods for zooming and panning(i.e. zoomIn and zoomOut). I want to save the zoom/pan position in localstorage and retreive the positions from there when page is refreshed. Now the problem, when again chart is zoomed or panned then chart goes to centre position and it is zoomed from there.

This peice of code I have written as below.

function handleZoom() {
    const s = JSON.parse(localStorage.getItem("transform") as string);

    selectAll("g.chart").attr(
      "transform",
      `translate(${s.x}, ${s.y}) scale(${s.k})`
    );
  }

  useEffect(() => {
    if (localStorage.getItem("transform")) {
      handleZoom();
    }
  });

  useEffect(() => {
    const zoomT = zoom().on("zoom", function (event) {
      selectAll("g.chart").attr("transform", event.transform);
      localStorage.setItem("transform", JSON.stringify(event.transform));
      console.log(event.transform);
    });

    selectAll("svg").call(zoomT);
  });