d3.js how to merge with transition + add mouse event?

Question

I am trying to create a bar chart like in the following example https://d3-graph-gallery.com/graph/barplot_button_data_hard.html with tooltips on mouseover.

It does not work because there is a transition before calling the mouse event (reason see answer D3: When I add a transition, my mouseover stops working... why? )

However, even if I split the calls, it still does not work or I break the merge transition. Does anybody have an idea how to fix this? This is my current code:

let u = this.svg.selectAll("rect")
        .data(data);

    u.enter()
        .append("rect") // Add a new rect for each new elements
        .merge(u)
        .transition() // and apply changes to all of them
        .duration(1000)
        .attr("x", (d: any) => { return this.x(d.date); })
        .attr("y", (d: any) => { return this.y(d.value); })
        .attr("width", this.x.bandwidth())
        .attr("height", (d: any) => { return this.height - this.y(d.value); })
        u.on('mouseover', (event: any, d: any) => {
            d3.select('#tooltip').transition().duration(200).style('opacity', 1);
            d3.select('#tooltip').html(`Dividend: <span>${d.value}</span>`)
                .style('left', `${event.x}px`)
                .style('opacity', `1`)
                .style('top', `${(event.y - 28)}px`);
          }).on('mousemove', (event: any, d: any) =>
            d3.select('#tooltip')
            .style('left', `${event.x}px`)
            .style('top', `${(event.y - 28)}px`
          )).on('mouseout', () => d3.select('#tooltip').transition().duration(200).style('opacity', 0));