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