D3 bar chart w/ react - tests pass but the tooltip isn't showing up at the correct spot

codepen

I’ve passed 14/14 tests but my tooltip doesn’t show up where the mouse is. The .on(mouseover) section is pasted below but no matter what I’ve tried the tooltip just shows up centralized under the title.

// create the bars
    svg.selectAll("rect")
     { ... other stuff...}
      // mouse over 
      .on("mouseover", function(e,d) {
        d3.select(this).classed("highlight", true);
        const [x,y] = d3.pointer(e);
        // these print the correct coordinates to the console
        console.log("X: " + x + " Y: " + y);
        console.log(`${e.pageX}px`)
        console.log(`${e.pageY}px`)
        tooltip
          .style("opacity", 1)
          .html(d[0]+ '<br/>' + "$" + d[1])
          .attr("height", "7px")
          .attr("width", "7px")
          .attr("data-date", d[0])
          // HELP
          // I can't figure out why the tooltip is not being placed here
          .style("left", `${e.pageX}px`)
          .style("top", `${e.pageY}px`)
          // This was my other method but also doesn't work
          //.attr('transform', `translate(${x}, ${y})`)
    })

Thanks in advance for any help!!