Как мне обернуть элементы SVG <g>внутри <div>?

Question

Я пытаюсь понять, почему не работают окружающие элементы SVG, такие как - <g>, <rect>, <circle> с <div>.

Я создаю интерактивную визуализацию. В этой визуализации у меня есть <circle>, завернутый в <g>. При использовании react-contextmenu npm для добавления контекстного меню добавляются элементы <div> вокруг <g>, что не приводит к выводу.

Чтобы воспроизвести проблему, я использовал пример MDN. Следующий код показывает 2 круга, как и ожидалось -

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <!-- Using g to inherit presentation attributes -->
    <g fill="white" stroke="green" stroke-width="5">
        <circle cx="40" cy="40" r="25" />
        <circle cx="60" cy="60" r="25" />
    </g>
</svg>

JSFiddle - https://jsfiddle.net/phfj3a2u/

Если я окружу <g> <div>, я вижу пустой экран.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <div>
        <g fill="white" stroke="green" stroke-width="5">
            <circle cx="40" cy="40" r="25" />
            <circle cx="60" cy="60" r="25" />
        </g>
    </div>
</svg>

JSFiddle - https://jsfiddle.net/5m2at4bw/

РЕДАКТИРОВАТЬ: Добавление примера, чтобы проиллюстрировать необходимость <div>

//index.js
import React          from 'react';
import ReactDOM       from 'react-dom';
import App            from './components/App.js';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

//components/App.js
import React from 'react';
import {
  ContextMenu,
  MenuItem,
  ContextMenuTrigger } from 'react-contextmenu';

export default class App extends React.PureComponent {

  constructor(props) {
    super(props);
  }

  handleClick(e, data) {
    console.log(data.circleId);
  }

  render() {
    return (
      <>
        <svg viewBox="0 0 100 100">
          <g fill="white" stroke="green" strokeWidth="5">
            <ContextMenuTrigger id = "firstCircle">
              <circle cx="10" cy="10" r="5" />
            </ContextMenuTrigger>

            <ContextMenu id = "firstCircle">
              <MenuItem data = {{circleId : 1 }} onClick = {this.handleClick}>
                ContextMenu Item 1
              </MenuItem>
              <MenuItem data = {{circleId : 1 }} onClick = {this.handleClick}>
                ContextMenu Item 2
              </MenuItem>
            </ContextMenu>

            <ContextMenuTrigger id = "secondCircle">
              <circle cx="10" cy="30" r="5" />
            </ContextMenuTrigger>

            <ContextMenu id = "secondCircle">
              <MenuItem data = {{circleId : 2 }} onClick = {this.handleClick}>
                ContextMenu Item 1
              </MenuItem>
              <MenuItem data = {{circleId : 2 }} onClick = {this.handleClick}>
                ContextMenu Item 2
              </MenuItem>
            </ContextMenu>
          </g>
        </svg>
      </>
    );
  }
}

Когда реакция создает приложение, элемент <svg> выглядит как -

<svg viewBox="0 0 100 100">
  <g fill="white" stroke="green" stroke-width="5">
  <div class="react-contextmenu-wrapper">
    <circle cx="10" cy="10" r="5">
    </circle>
  </div>

  <nav role="menu" tabindex="-1" class="react-contextmenu" style="position: fixed; opacity: 0; pointer-events: none;">
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 1</div>
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 2</div>
  </nav>

  <div class="react-contextmenu-wrapper">
    <circle cx="10" cy="30" r="5">
    </circle>
  </div>
  <nav role="menu" tabindex="-1" class="react-contextmenu" style="position: fixed; opacity: 0; pointer-events: none;">
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 1</div>
    <div class="react-contextmenu-item" role="menuitem" tabindex="-1" aria-disabled="false">ContextMenu Item 2</div>
  </nav>
  </g>
</svg>

Обратите внимание, что <div> обернут вокруг <circle>. Это вызывает пустой экран. Теперь я знаю, почему это происходит. Я ищу предложения о том, как это исправить.