我已经构建了一个组件，在必要的时候使用next/dynamic来导入react-icons，但是我找不到一个正确的方法来定义这个组件的typescript类型。
下面是一个指向代码和文本框的链接：https://codesandbox.io/s/nextjs-dynamic-import-with-react-icons-zk1kz9

代码：

import dynamic from "next/dynamic";

const DynamicIcon = ({
  iconFamily,
  icon,
  ...rest
}: {
  iconFamily: keyof typeof Icons;
  icon: string;
}) => {
  const Icons = {
    ci: dynamic(() => import("react-icons/ci").then((mod) => mod[icon])),
    fa: dynamic(() => import("react-icons/fa").then((mod) => mod[icon])),
    io: dynamic(() => import("react-icons/io").then((mod) => mod[icon])),
    io5: dynamic(() => import("react-icons/io5").then((mod) => mod[icon])),
    md: dynamic(() => import("react-icons/md").then((mod) => mod[icon])),
    ti: dynamic(() => import("react-icons/ti").then((mod) => mod[icon])),
    go: dynamic(() => import("react-icons/go").then((mod) => mod[icon])),
    fi: dynamic(() => import("react-icons/fi").then((mod) => mod[icon])),
    gi: dynamic(() => import("react-icons/gi").then((mod) => mod[icon])),
    wi: dynamic(() => import("react-icons/wi").then((mod) => mod[icon])),
    di: dynamic(() => import("react-icons/di").then((mod) => mod[icon])),
    ai: dynamic(() => import("react-icons/ai").then((mod) => mod[icon])),
    bs: dynamic(() => import("react-icons/bs").then((mod) => mod[icon])),
    ri: dynamic(() => import("react-icons/ri").then((mod) => mod[icon])),
    fc: dynamic(() => import("react-icons/fc").then((mod) => mod[icon])),
    gr: dynamic(() => import("react-icons/gr").then((mod) => mod[icon])),
    hi: dynamic(() => import("react-icons/hi").then((mod) => mod[icon])),
    hi2: dynamic(() => import("react-icons/hi2").then((mod) => mod[icon])),
    si: dynamic(() => import("react-icons/si").then((mod) => mod[icon])),
    sl: dynamic(() => import("react-icons/sl").then((mod) => mod[icon])),
    im: dynamic(() => import("react-icons/im").then((mod) => mod[icon])),
    bi: dynamic(() => import("react-icons/bi").then((mod) => mod[icon])),
    cg: dynamic(() => import("react-icons/cg").then((mod) => mod[icon])),
    vsc: dynamic(() => import("react-icons/vsc").then((mod) => mod[icon])),
    tb: dynamic(() => import("react-icons/tb").then((mod) => mod[icon])),
    tfi: dynamic(() => import("react-icons/tfi").then((mod) => mod[icon]))
  };

  const Icon = iconFamily && icon ? Icons[iconFamily] : null;

  if (!Icon) return <></>;

  return (
    <>
      <Icon {...rest} />
    </>
  );
};

export default DynamicIcon;

错误：

./components/DynamicIcon.tsx:12:17
Type error: Argument of type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to parameter of type 'DynamicOptions<IconBaseProps> | Loader<IconBaseProps>'.
  Type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type '() => LoaderComponent<IconBaseProps>'.
    Type 'Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type 'LoaderComponent<IconBaseProps>'.
      Type 'typeof import("/sandbox/node_modules/react-icons/ci/index") |IconType | undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
        Type 'undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.

我尝试了多种定义类型的方法（字符串、keyoftypeofIconType等）