Реагировать appendChild на svg

Я новичок в React и сейчас работаю над интерактивной картой мира. Я использую встроенный svg. Я добавил немного css, поэтому, когда я наводил курсор на континенты, они преобразовывались: масштаб (1.1) Я понял, что какой-то континент находится сзади. При наведении на них они масштабируются, но выглядит это странно.

Здесь вы можете увидеть Европу, Азию и Африку без зависания.

Когда вы зависаете над Азией, вы можете видеть, что она увеличивается, но она находится позади Африки.

это из-за порядка рендеринга svg 1.1

3.3 Порядок рендеринга

Элементы во фрагменте документа SVG имеют неявный порядок отрисовки, с "окрашиванием" первых элементов фрагмента документа SVG первый. Последующие элементы красятся поверх окрашенных ранее элементы.

К сожалению, svg 1.1 не поддерживает z-index. Насколько мне известно, я вообще не изучал svg 2.0 (который будет поддерживать z-index).

поэтому я читал несколько тем о том, как можно было бы упорядочить континенты при наведении, чтобы зависший был впереди.

Я нашел Как вывести элементы svg на передний план

И начал пробовать делать это с React. Я использую событие onMouseEnter на пути, который вызывает функцию handleHover и передает событие, внутри функции я вызываю свойство parentElement для currentTarget и appendChild для currentTarget.

function MapComponent() {

  function handleHover(event) {
    event.currentTarget.parentElement.appendChild(event.currentTarget);
  }

  return (
    <svg version = "1.1" id = "World" viewBox = "0 0 1920 1080">
      <a href = "/Australia" title = "Australia" className = "nav-link">
        <path
          id = "Australia"
          onMouseEnter = {(event) => handleHover(event)}
          d = "..."
        />
      </a>
    </svg>
  );
}

Но это не работает, как ожидалось. При наведении на путь (континент) он все еще находится сзади.

Обновлено: при замене appendChild() на removeChild() континент исчезает при вводе мыши. Это говорит мне, что выбран правильный элемент.

Я тоже пробовал совсем по другому, как описано здесь(в первом примере). К сожалению, это тоже не работает.

  const [isHovered, setHovered] = useState(false);


  return (
    <svg version = "1.1" id = "World" viewBox = "0 0 1920 1080">
      <a href = "/Australia" title = "Australia" className = "nav-link">
        <path
          id = "Australia"
          onMouseEnter = {() => setHovered(true)}
          onMouseLeave = {() => setHovered(false)}
          d = "..."
        />
        {isHovered && (
          <path
            id = "Australia"
            onMouseEnter = {() => isHovered(true)}
            onMouseLeave = {() => isHovered(false)}
            d = "..."
          />
        )}