How to un-string an HTML tag block to be rendered in React code?

I want to use an HTML tag as a value in my React code, inside the map function. However, React renders it as a string. I want it to be rendered as HTML or SVG.

skills: [
            {
                icon: `<svg xmlns="http://www.w3.org/2000/svg" className="inline-block h-16 w-16 fill-current text-mygreen" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1} d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
                </svg>`,
                category: 'Front-end',
            }

//I Want to use it in the map function so that it renders the actual SVG icon:

data.skills.map(skill => {
                    return (<div className="">
                        {skill.icon}
                        <div className="mt-4 md:mt-8 text-2xl text-gray-800 font-bold font-Titillium">{skill.category}</div>
             })

However, it renders the SVG as a string. How do I fix that?