How to change string parsed from inline SVG into <svg></svg> element

I want to get the inline SVG string in the form of text

Expected output:

const fetchedText = 
"<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>"

I have tried with DOMParser but somehow this is not working here. Any suggestion for this error please. What i am doing wrong here ?

InlineSvg.js

import React from 'react';
export default () =>
    <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>

App.js

export function getSvg() {
  const text = JSON.stringify(InlineSvg());
  const oParser = new DOMParser();
  const oDOM = oParser.parseFromString(text, "image/svg+xml");
  const root = oDOM.documentElement;
  console.log(root.firstChild.innerHTML)
}

Console.log

"{"type":"svg","key":null,"ref":null,"props":{"width":"100","height":"100","xmlns":"http://www.w3.org/2000/svg","children":{"type":"circle","key":null,"ref":null,"props":{"cx":"50","cy":"50","r":"40","stroke":"green","stroke-width":"4","fill":"yellow"},"_owner":null,"_store":{}}},"_owner":null,"_store":{}}"

Without Json.stringyfy()

Output

"<parsererror xmlns="http://www.w3.org/1999/xhtml" style="display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"><h3>This page contains the following errors:</h3><div style="font-family:monospace;font-size:12px">error on line 1 at column 1: Document is empty
</div><h3>Below is a rendering of the page up to the first error.</h3></parsererror>"