avoid zoom transform from resetting after svg is clicked d3

Question

I have a svg element ; the nodes, links, labels etc. are appended to it. I got the zoom-to-particular-node-by-name functionality running but the issue is after zooming automatically to the respective node , whenever I try to pan svg (by clicking and dragging it around), it resets the zoom and the coordinates to how it was before I zoomed to a particular node. I think it has to do with the way d3.event.transform works but I am not able to fix it. I want to be able to continue panning and zooming from the node I zoomed to without resetting any values.

(Also, from a bit of debugging , I observed that the cx and cy coordinates for the nodes did not change by zooming and panning from the code, but If I were to zoom and pan to a node manually , then it would. I guess that is the problem)

  var svg1 = d3.select("svg");
  var width = +screen.width;
  var height = +screen.height - 500;

  svg1.attr("width", width).attr("height", height);

  var zoom = d3.zoom();
  var svg = svg1
    .call(
      zoom.on("zoom", function() {
        svg.attr("transform", d3.event.transform);
      })
    )
    .on("dblclick.zoom", null)
    .append("g");


function highlightNode() {
    var userInput = document.getElementById("targetNode");
    theNode = d3.select("#" + userInput.value);
    const isEmpty = theNode.empty();
    if (isEmpty) {
      document.getElementById("output").innerHTML = "Given node doesn't exist";
    } else {
      document.getElementById("output").innerHTML = "";
    }
    svg
      .transition()
      .duration(750)
      .attr(
        "transform",
        "translate(" +
          -(theNode.attr("cx") - screen.width / 2) +
          "," +
          -(theNode.attr("cy") - screen.height / 4) +
          ")"
        // This works correctly
      );


  }