How to use querySelectorAll Nodelist objects as react components

Question

Im using querySelectorAll to grab all tags that have a specific id from a html string, i then want to render the tags in a react component. I do this by trying to map the object given back by querySelectorAll. When i do this i get an uncaught error and im unsure how to fix it. Uncaught Error: Objects are not valid as a React child (found: [object SVGGElement]). If you meant to render a collection of children, use an array instead. i tried turning the objects into an array but i still get errors. Heres my code

function findIdTooth() {
   console.log('hello')
   const svg = `<svg>
                <g id="tooth-311-default">
                    <g>
                        <g id="XMLID_9_">
                            <g>
                                <path class="st16" d="M858.8,1050.8c0,0-1.8,11.3,5.2,12.3l24.2-5.5h0c0.8-2.1,1.8-5.1,1.6-7.6c0,0-9.6-14.6-18.2-11.9
                                    C863,1040.7,858.8,1050.8,858.8,1050.8z"/>
                                <path class="st16" d="M888.2,1057.5l-24.2,5.5C873.7,1064.6,888.1,1057.9,888.2,1057.5z"/>
                                <path class="st25" d="M888.2,1057.5c-0.1,0.3-14.5,7.1-24.2,5.5c0,0,10.9,30,17.2,29.5c6.3-0.5,5.9-23,5.7-32.2
                                    C886.9,1060.3,887.5,1059.2,888.2,1057.5L888.2,1057.5z"/>
                            </g>
                            <g>
                                <path class="st20" d="M888.2,1057.5c0.8-2.1,1.8-5.1,1.6-7.6c0,0-9.6-14.6-18.2-11.9c-8.6,2.6-12.8,12.8-12.8,12.8
                                    s-1.8,11.3,5.2,12.3c0,0,10.9,30,17.2,29.5c6.3-0.5,5.9-23,5.7-32.2C886.9,1060.3,887.5,1059.2,888.2,1057.5z"/>
                                <path class="st20" d="M888.2,1057.5c-0.1,0.3-14.5,7.1-24.2,5.5"/>
                            </g>
                        </g>
                    </g>
                </g>
        </svg>`

        console.log(props.tooth)
        var parser = new DOMParser();
        var doc = parser.parseFromString(svg, "text/html");
        var teeth = doc.querySelectorAll(`[id^=tooth-${props.tooth}]`);
        console.log(typeof(teeth), 'swag')
        const teething = [...teeth]
        var htmlObject = document.createElement('div') 
        //return (<div>{teeth.map((tooth => ({tooth}))) }</div>)
        return (teething.map((tooth) => (console.log(tooth, 'ch'), tooth )))

    }



    return(<div>

        <svg version="1.1"  x="0px" y="0px" viewBox="0 0 900 900">
            {findIdTooth()}
        </svg>

        
                



    </div>)

}
    
export default ShowTooth;

Is there anyway i can convert a string to HTML then query all the ids based on a given id and then render it in react? (in my actual code above svg string is larger with many different IDs for many different teeth, i.e theres tooth-211, tooth-213, etc)