Создание изображения из svg не работает

Я пытался создать изображение (используя класс window.Image) из DataURL. Этот DataURL содержит тег svg и сторонний объект. Но он просто остается совершенно пустым. Я также пытался нарисовать это изображение на холсте, но я не думаю, что это проблема, поскольку я даже не могу получить правильно выглядящее изображение.

Готовые данныеURL

data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3CforeignObject%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3Cdiv%20style%3D%22background-color%3Ared%22%3Etest%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E

Шаблонный тег SVG

ПРИМЕЧАНИЕ. Компонент ReactJS (<Component />) преобразуется в строку. Но он не содержит никаких стилей, это просто простой div с текстом внутри.

const svg = `<svg xmlns = "http://www.w3.org/2000/svg" width = "200" height = "200"><foreignObject width = "100%" height = "100%">${renderToStaticMarkup(
        <Component />
    )}</foreignObject></svg>`;

Шаблон DataURL

const url = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svg)}`;

Загрузка изображения

const image = new window.Image(url);
image.src = url;

Изображение на холст

const ctx = canvas.getContext("2d");
const image = await loadImage(url) // a simple wrapper function which waits for the image to load that returns a promise
ctx.drawImage(image, 0, 0);