如何從 object 渲染動態 React 組件

Question

需要渲染一個導入的組件，如下所示，在我的 React 代碼中包含一些道具。 我認為這很簡單，但我無法在 Stack overflow 上找到這種格式的答案。 這將如何完成？ 謝謝你。

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>
   )

編輯：這是運行以下代碼時的錯誤

Answer 1

OP：明白了，這是一個類型問題。 這里不接受'any'，我們必須這樣定義圖標

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