如何从 object 渲染动态 React 组件

Question

Need to render an imported component, like below, with some props inside my React code. I'm thinking this is simple, but I can't find an answer on Stack overflow for this a format like this. How would this be done? Thank you.

import { HomeIcon } from "../lib/icons";

[{
    title: "Home",
    icon: ({ color }: { color: string }) => <HomeIcon color={color} />,
}].map((item, index) => {
        
   const { title, icon: Icon } = item;

   return (
       <div>
           <Icon color="#fff" /> // Doesn't work!
       </div>
   )

EDIT: Here is the error when running the code below

Answer 1

OP: Got it, it was a type issue. 'any' isn't accepted here, we have to define icon like this

          icon: (({ color }: { color: string }) => (
            <HomeIcon color={color} />
          )) as React.ElementType<{ color: string }>,