In my d3 chart appended `rect` is not coming properly

In my d3 chart, on click of circle/point, I am showing the rect, which is not coming properly. xScale reference is not correct.

g.selectAll(".rect-elements")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "rect-elements")
  .attr("id", d => "rect_" + d.startTime)
  .attr("x", d => xScale(d.startTime) - 12.5)
  .attr("y", 0)
  .attr("width", 24)
  .attr("height", height + 5)
  .attr("data", d => d)
  .style("fill", "steelblue")
  .style("opacity", 0);

This reference is not correct, it takes the default scale.

xScale(d.startTime)

because of this code

if (data.length > 1) svg.call(zoom.transform, transform); //This is initial call on chart 

it is not coming properly it comes to the default scale.

I tried to recover the new scale and use but d3.event is not available.

let newXscale;
        if(d3.event)
            newXscale = d3.event.transform.rescaleX(xScale);
        else
            newXscale = xScale;

newXscale(d.startTime)

Any guidance what I am missing.

code sandbox - https://codesandbox.io/s/hungry-monad-xw9dw