Ошибка компиляции машинописного текста с React - типу «Элемент» нельзя присвоить типу «FunctionComponent <{}>»

Question

Используется оригинальный код -

import { Create } from '@material-ui/icons';

<DroppableFolder
          count={draftsCount}
          sidebarOpen={open}
          folderId={FolderType.Drafts}
          Icon={Create}
          name="Drafts"
          type="folder"
          url={Communication.drafts}
/>

А это интерфейс -

export default interface DroppableFolderProps {
  count?: number;
  folderId: string;
  label?: Label;
  Icon?: React.ComponentType;
  name?: string;
  type: LinkType;
  url: string;
  sidebarOpen?: boolean;
}

При замене Icon={Create} на этот функциональный компонент React,

const DraftIcon = <Icon icon="draft-icon" title="Draft Icon" size="medium" />;

<DroppableFolder
          count={draftsCount}
          sidebarOpen={open}
          folderId={FolderType.Drafts}
          Icon={DraftIcon}
          name="Drafts"
          type="folder"
          url={Communication.drafts}
/>

Я получаю эту ошибку -

type 'Element' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
    Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null'.

для строки Icon={DraftIcon}.

Есть предложения?

Answer 1

Попробуйте, измените свойство Icon в DroppableFolderProps на тип IconProps

interface DroppableFolderProps{
  Icon:IconProps
}

Измените const DraftIcon на функциональный компонент

const DraftIcon = ()=> <Icon icon="draft-icon" title="Draft Icon" size="medium" />;

И передайте DraftIcon компоненту DroppableFolderProps

<DroppableFolder Icon={ <DraftIcon/> } />