Как добавить элемент в svg, загруженный динамически в ReactJs?

В своём ReactJs проекте мне нужно подтягивать с сервера svg файлы и отображать. Но при этом, мне нужно внедрять определённые элементы в svg. Поэтому я воспользовался библиотекой react-svg.

Она загружает svg из сети по ссылке и инжектит в компонент. После инжекта вызывается функция afterInjection. В неё передаются два объекта - ошибки и сам svg. Но svg не как реакт компонент, а как DOM элемент.

Моя задача внедрить в svg определённые графические элементы. Для эксперимента я решил внедрить текст. Т.е. если добавить в мой svg вот такой текст <text x="100" y="100">text1</text> то на картинке мы должны увидеть надпись text. Я пробую это сделать через инспектор в мозиле (Редактировать как HTML на элементе svg) и всё отображается как надо.

Теперь код моего компонента.

import React from 'react'
import {ReactSVG} from "react-svg";

class SVGLoader extends React.Component {
    render() {
        return <div>
            <ReactSVG
                renumerateIRIElements={false}
                src="https://cdn.shopify.com/s/files/1/0496/1029/files/Freesample.svg"
                afterInjection={this.afterInjection}
            />
        </div>
    }

    afterInjection = (error, svg) => {
        if (error) {
            console.error(error);
            return
        }
        const text = document.createElement('text');
        text.setAttribute('x', '100');
        text.setAttribute('y', '100');
        text.innerText = 'text';
        svg.appendChild(text);
    }
}

export default SVGLoader;

Однако, хоть <text x="100" y="100">text1</text> и виден в инспекторе, но на картинке не отображается. Я понимаю, что реакт наверное не видит, что я добавил элемент к html. Это связано с тем что я добавляю в реальный DOM, а реакт делает изменения в виртуальный DOM. Если конечно я правильно всё понял. Я нашёл про dangerouslySetInnerHTML, но он применяется для уже существующего в разметке элемента.

Как мне добавить элемент в SVG в таком случае?