d3: how to focus separate tooltips for stacked area chart?

I’m creating a stacked area chart using d3.js. Right now im not able to figure out on mousemove how to focus separate tooltip on the respective chart curve.
I’m trying to achieve this but for stacked area chart

I have created a sandbox of my progress here: https://codesandbox.io/s/recursing-carlos-3t0lg

Relevant code:

    function mouseMove() {
      d3.event.preventDefault();
      const mouse = d3.mouse(d3.event.target);
      const [xCoord, yCoord] = mouse;
      const mouseDate = x.invert(xCoord);
      const mouseDateSnap = d3.timeDay.floor(mouseDate);
      const bisectDate = d3.bisector((d) => d.date).left;
      const xIndex = bisectDate(data, mouseDateSnap, 0);
      const mouseHours = data[xIndex].hours;
      let demandHours =
        data[xIndex].resourceType === "DMND" ? data[xIndex].hours : "";
      let supplyHours =
        data[xIndex].resourceType === "SPLY" ? data[xIndex].hours : "";

      if (x(mouseDateSnap) <= 0) return;

      svg
        .selectAll(".hoverLine")
        .attr("x1", x(mouseDateSnap))
        .attr("y1", margin.top)
        .attr("x2", x(mouseDateSnap))
        .attr("y2", height - margin.bottom)
        .attr("stroke", "#69b3a2")
        .attr("fill", "#cce5df");

      svg
        .select(".hoverPoint1")
        .attr("cx", x(mouseDateSnap))
        .attr("cy", y(supplyHours))
        .attr("r", "7")
        .attr("fill", "green");
      svg
        .select(".hoverPoint2")
        .attr("cx", x(mouseDateSnap))
        .attr("cy", y(demandHours))
        .attr("r", "7")
        .attr("fill", "yellow");

      const isLessThanHalf = xIndex > data.length / 2;
      const hoverTextX = isLessThanHalf ? "-0.75em" : "0.75em";
      const hoverTextAnchor = isLessThanHalf ? "end" : "start";

      svg
        .selectAll(".hoverText")
        .attr("x", x(mouseDateSnap))
        .attr("y", y(mouseHours))
        .attr("dx", hoverTextX)
        .attr("dy", "-1.25em")
        .style("text-anchor", hoverTextAnchor)
        .text(
          data[xIndex].resourceType === "DMND"
            ? demandHours + "sec"
            : supplyHours + "sec"
        );
    }

    svg.append("line").classed("hoverLine", true);
    svg.append("circle").classed("hoverPoint1", true);
    svg.append("circle").classed("hoverPoint2", true);
    svg.append("text").classed("hoverText", true);
    svg
      .append("rect")
      .attr("fill", "transparent")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", width)
      .attr("height", height);
    svg.on("mousemove", mouseMove);

In above code I’m creating 2 separate tooltips using selections hoverPoint1 (to show hours SPLY hours) and hoverPoint2 (to show DMND hours)

Expected:
on mousemove, the green circle should move along the curve of blue plotted area AND at same time yellow circle should move along curve of gray plotted area. (please see this as example which shows single area tooltip https://observablehq.com/@elishaterada/simple-area-chart-with-tooltip)

thanks!