JSX element type 'Icon' does not have any construct or call signatures

I am relatively new to typescript and trying to diagnose an error. I’m making sidebar navigation and trying to pull an icon from my navigation array.

Array:

    const menuItems = [
        { id: 1, label: "Dashboard", icon: <ComputerDesktopIcon />, link: "/" },
        { id: 2, label: "Page 2", icon: <AcademicCapIcon />, link: "" },
        { id: 3, label: "Settings", icon: <Cog6ToothIcon />, link: "/" },
    ];

In my code, the error is stemming from this section:

<div className="flex flex-col items-start mt-24">
                    {menuItems.map(({ icon: Icon, ...menu }) => {
                        const classes = getNavItemClasses(menu);

                        return <div className={classes}>
                            <Link href={menu.link}>
                                <div className="flex py-2 px-3 items-center w-full h-full">
                                    <div>
                                        <Icon />
                                    </div>
                                    {!toggleCollapse && (
                                        <span className={classNames('text-md font-medium text-dark-gray')}>
                                            {menu.label}
                                        </span>
                                    )}
                                </div>
                            </Link>
                        </div>
                    })}
                </div>

Specifically the <Icon /> call is throwing the error: JSX element type 'Icon' does not have any construct or call signatures.

Worth noting everything works perfectly when that line is commented out.

I’ve worked through building props components and other Stack Overflow issues, but where I’m getting caught is in the menuItems.map section… most tutorials only define creating + implementing single const items.

>Solution :

JSX element type ‘Icon’ does not have any construct or call signatures

icon is already a called react component that returns JSX.

Simply replace </> with curly braces {}.

{menuItems.map(({ icon, ...menu }) => {
   ...
   {icon}
   ...
})}