Y axis line is flickering using D3

I'm trying to create a running line chart where it animates changes and the X and Y axis and the line itself.

I've started with the basic animation explanation at: https://observablehq.com/@d3/learn-d3-animation?collection=@d3/learn-d3

And created my own (see code and link below)

My problem is that as soon as I add the await chartBug.update the Y axis starts flickering. See animated gif below:

I think I need the await, to wait for the animation to complete before I start the next animation, and control the smooth speed of the animation.

While I'm here I would like also to ask how can I force the axis to draw the start and end ticks.

Thanks for the help

Here's a link to the page on www.observablehq.com

Here's the Animated gif of the problem - the source code is below:

chartBug = {
  const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);

  const zx = x.copy(); // x, but with a new domain.
  const zy = y.copy(); // x, but with a new domain.

  const line = d3
    .line()
    .x(d => zx(d.date))
    .y(d => y(d.close));

  const path = svg
    .append("path")
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-width", 1.5)
    .attr("stroke-miterlimit", 1)
    .attr("d", line(data));

  const gx = svg.append("g").call(xAxis, zx);

  const gy = svg.append("g").call(yAxis, y);

  return Object.assign(svg.node(), {
    update(step) {
      const partialData = [];
      for (let i = 0; i < step; i++) {
        partialData.push(data[i]);
      }
      const t = svg.transition().duration(50);
      zx.domain(d3.extent(partialData, d => d.date));
      gx.transition(t).call(xAxis, zx);

      zy.domain([0, d3.max(partialData, d => d.close)]);
      gy.transition(t).call(yAxis, zy);

      path.transition(t).attr("d", line(data));
      return t.end();
    }
  });
}

{
  replay2;
  for (let i = 0, n = data.length; i < n; ++i) {
    await chartBug.update(i);
    yield i;
  }
}