Mouse out event not working properly in JavaScript d3

I am working with D3 Charts, and by all work I have completed the chart and did some enhancement as well.

What I am doing

1. I have one function which shows tooltip, whenever I hover over any bar I am showing some info to the user.
2. My chart shows live data, so if any new data is coming it automatically creates a new bar.
3. SO when I hover over any bar then data is showing fine and perfect

My issue

4. So as I mentioned above in my case the data comes after some interval continuously, so I am getting data and adding it to previous data

5. The issue is when i Hover the last bar the tooltip shows fine, and when the new data comes so now two tooltips showing and it goes on and on

But in my coding I am writing code to remove the tooltip on mouseout, but still getting this issue

My code

This is what I am doing

.on("mousemove", function (event, d) {
    // this whole code is when I hover that perticular bar
    d3.select(this)
      .transition()
      .duration("50")
      .attr("opacity", 0.6)
      .attr("x", (a) => xScaleBars(a.timeline) - 3)
      .attr("width", xScaleBars.bandwidth() + 6)
      .style("filter", "url(#glow)");

    div.transition().duration(50).style("opacity", 1);
    div
      .html(
        `</text><text"></br> value :  ${d.dataToShow}
        <br/>
        </text><text"></br> Month :  ${d.month}
        `
      )

      .style("left", event.pageX - 58 + "px")
      .style("top", event.pageY - 140 + "px");
  })

This above code is when I hove rover

Below is the code when I do mouseout

 .on("mouseout", function (d, i) {
    // this is when I move cursor out of that bar
    d3.select(this)
      .transition()
      .duration("50")
      .attr("width", xScaleBars.bandwidth())
      .attr("x", (a) => xScaleBars(a.timeline))
      .style("filter", "none")
      .attr("opacity", "1");
    div.transition().duration("50").style("opacity", 0);
  })

• I have tried display none as well as visibility property, but nothing works
• I don't know what I am doing wrong
• is My code right or wrong this also I am not getting properly

I have put all of my code in code sandbox Please have a look

PS: I am using use Effect with set Timeout for each 1 second to make it update every second

I have checked all the related suggestion by stack overflow, but none helped me out may be I am wrong but I did not found the solution.

from Mouse out event not working properly in JavaScript d3