How to add click handler to D3 element in React

I have the below code that appends a rect into an svg. I need that rect to handle click events such as click and mouseenter.

import { useEffect } from "react";
import * as d3 from "d3";

export default function App() {
  useEffect(() => {
    const svg = d3.select("#svg");

    svg
      .append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", 300)
      .attr("height", 300)
      .attr("fill", "red")
      .attr("id", "red-rect");

    const redRect = d3.select("#red-rect");

    redRect.on("mouseenter", () => {
      console.log("working");
    });
  }, []);

  

  return <svg id="svg" />;
}

The above does not work. I can register the entire svg but not the rect. The below works:

   svg.on("mouseenter", () => {
      console.log("working");
    });

This is a minimalistic example. In the real project I'll be creating several rects inside the same svg.

The strange thing is that if I create a rect inside the return statement, I can register the mouse listener. But I don't want to use React return to create elements. I want to create elements exclusively with D3.

export default function App() {
  useEffect(() => {
    const greenRect = d3.select("#green-rect");

    greenRect.on("mouseenter", () => {
      console.log("working");
    });

  }, []);

  return (
    <svg id="svg">
      <rect x={0} y={0} width={300} height={300} fill="green" id="green-rect" />
    </svg>
  );
}

How can I append rects (or other elements) on my svg and use mouse events on them?

Here's a fiddle

Thanks

When appending your elements, give the selection a name:

useEffect(() => {
  const svg = d3.select("#svg");

  const redRect = svg.append("rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 300)
    .attr("height", 300)
    .attr("fill", "red")
    .attr("id", "red-rect");

  redRect.on("mouseenter", () => {
    console.log("working");
  });
}, []);

Here's the forked sandbox.