How to render nextjs component inside an object string?

I have installed lucide react icon package and stored each JSX element tag in object within a string as “ICON” and loop through each of them through the array map.

My problem is, how i can render and execute it as a JSX tag? and not a string. Currently it is rendered as a normal string in the browser.

Menu items.

export const MenuItems = [
{
    label: "Home",
    icon: "<House color={black} size={32} />",
    url: "/",
},
{
    label: "About",
    icon: "<ContactRound />",
    url: "/about",
},
{
    label: "Contact",
    icon: "<Phone />",
    url: "/contact",
},
];

Main Menu Component.

import Link from "next/link";
import { MenuItems } from "./MenuItems";
import Image from "next/image";
const Menu = () => {
return (
    <div className=''>
        {MenuItems.map(i => (
            <div className="">
                <Link href={i.url} key={i.label}>
                    {/*<Image src={i.icon} alt="icon" width={32} height={32}/>*/}
                    {i.icon}

                    <span>{i.label}</span>
                </Link>
            </div>
        ))}
    </div>
);
}
export default Menu;

Screenshot