Можно ли вызвать React из обработчика событий html

Я использую библиотеку рисования d3 с React.js и столкнулся с проблемой запуска событий onClick из элементов SVG.

Что я хочу сделать, так это вызвать функцию (переданную от родителя в реквизитах), когда я нажимаю на элемент в SVG. Проблема в том, что элементы SVG создаются d3 и не являются реактивными компонентами. Есть ли способ, которым я могу сделать эту работу?

Для тех, кто не знаком с d3, он предоставляет очень удобный синтаксис для создания и обновления svg из набора данных. Код выглядит примерно так:

      const existingNodes = d3Select('.nodes')
        .selectAll('g.node')
        .data(root.descendants());
      const newNodes = existingNodes.enter().append('g');
      newNodes
        .append('circle')
        .attr('onclick', (node) => 'onNodeSelected("Test")')
        .attr('r', (node) => nodeRadius(node.data));

Проблема с этим кодом заключается в строке с надписью .attr('onclick', (node) => 'onNodeSelected("Test")'), которая правильно добавляет атрибут onclick к кругам, но, конечно же, onNodeSelected является реквизитом компонента реакции, и к нему нельзя получить доступ таким образом.

Чтобы обеспечить некоторый контекст, сокращенный код компонента React выглядит следующим образом:

export const HierarchyDiagram = ({ onNodeSelected, hierarchyData }) => {

  useEffect(() => {
    function buildSvg(root) {
    ...abbreviated
      const existingNodes = d3Select('.nodes')
        .selectAll('g.node')
        .data(root.descendants());
      const newNodes = existingNodes.enter().append('g');
      newNodes
        .append('circle')
        .attr('onclick', (node) => 'onNodeSelected({node})')
        .attr('r', (node) => nodeRadius(node.data));
    ....abbreviated
    }

    if (hierarchyData) {
      buildSvg(hierarchyData);
    }
  }, [hierarchyData]);

  return (
    <svg width = "100%" height = "100%">
      <g className = "wrapper">
        <g className = "links"></g>
        <g className = "nodes"></g>
      </g>
    </svg>
  );
};