React Typescript: Cannot assign component to element

I need to map my JSX component(FC) inside an object for dynamic rendering. This is what I have come up with so far:

Interface for Object

interface Mappings {
  EC2: {
    component: React.FC<{}>;
    name: string;
    description: string;
  };
}

export enum ResourcesEnum {
  EC2 = 'EC2',
  S3 = 'S3',
}

The mapping object defined in the same file:

enter image description here

Error message:

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

Thanks alot in advance!

Answer

The type React.FC<{}> describes the component itself rather than an instance of the component. Mappings is expecting that your object contains component: EC2 instead of component: <EC2 />.

You either need to change your values to match your types or change your types to match your values. Either way is fine. If you want to keep component: <EC2 /> then your type needs to be component: JSX.Element.