Reactjs 在React中映射对象数组时，如何正确呈现JSX.Element或React.ReactNode类型

我有这个侧边栏数据

export const adminSidebarData: SidebarProps["sidebarData"] = [
  {
    title: "Dashboard",
    link: "/admin/dashboard",
    IconComponent: <IconDashboard className="icon" />,
  },
  {
    title: "Users",
    link: "/admin/dashboard/users",
    IconComponent: <IconDashboard />,
  }
];

我sidebarData的Typescript 类型是

sidebarData: {
    title: string;
    link: string;
    IconComponent: JSX.Element;
  }[];

我在用户界面中呈现数据，如下所示:

{sidebarData.map((data) => {
          return (
            <Link href={data.link} className="w-full" key={data.link}>
              <div
                key={data.link}
                className="mx-2 flex w-full bg-white px-2 py-2"
              >
                {data.IconComponent}
                <p className="">{data.title}</p>
              </div>
            </Link>
          );
        })}

如你所见，我呈现的图标是{data.IconComponent}，我不能以这种方式将动态props 传递给组件

But I wanted to render the component as <data.IconComponent/> or <IconComponent/> so that I will be able to pass props dynamically. Maybe changing the color based on the current route.
What change should I make to achieve this? Thank you.