In React application I drag components

const Draggable = ({ children, onDragStart, onDragEnd }) => (
  <div
    className="draggable"
    draggable={true}
    onDragStart={onDragStart}
    onDragEnd={onDragEnd}
  >
    {children}
  </div>
);

when they dropped this components become svg elements rendered with d3js.

const onDrop = (e) => {
    e.stopPropagation();
    const newElement = {
      id: elements.length + 1,
      x: e.nativeEvent.offsetX,
      y: e.nativeEvent.offsetY,
      data: draggedData
    };
    setElements((elements) => [...elements, newElement]);
  };


 ...
    useEffect(() => {
        const svg = d3
          .select(svgRef.current)
          .attr("width", width)
          .attr("height", height);
    
        if (elements.length) {
          svg
            .selectAll(".node")
            .data(elements, (d) => d.id)
            .join(
              (enter) => {
                if (enter && prevCount !== elements.length) {
                  const { type } = enter.datum().data;
                  if (type === "person") {
                    renderNode(enter, svg, setElements, "enter");
                  } else {
                    renderInput(enter, svg, setElements, "enter");
                  }
...

One svg element contains foreignObject with input and one button (it would be more buttons).

node
      .append("foreignObject")
      .attr("width", labelWidth - labelPadding * 2)
      .attr("height", 22)
      .attr("x", labelPadding)
      .attr("y", labelPadding)
      .html((d) => {
        return `<div>
            <form>
              <input type='text' class='' />
              <button type='button' onclick='alert("The form was submitted")'>Ok</button>
            </form>
            <div class='circle'></div>
          </div>`;
      });

I want to trigger changes in state of react component when click on button inside svg. How can I handle this?

Here is working example