I have file with exports of some classes (react components), and i have some string which contain class name as string. So i need create and render component by its name

My variant:

import * as Formatter from "@/src/component/Formatter"

function isFormatterKey(key: string): key is keyof typeof Formatter {
    return Formatter.hasOwnProperty(key);
}

function getFormatter(type: string, name: string, meta: JsonApiMetaAttributeType): React.Component {
    let formatterName = capitalizeFirstLetter(meta[type][name].type) + 'Formatter'
    if (!isFormatterKey(formatterName)) {
        formatterName = 'StringFormatter'
    }
    return Formatter[formatterName]
}

                                    {
                                        Object.keys(item.attributes).map((attrName: string) => {
                                            const FormatterComponent = getFormatter(item.type, attrName, meta)
                                            return (<td key={"data-cell-" + attrName}>
                                                <FormatterComponent>{item.attributes[attrName]}</FormatterComponent2>
                                            </td>)
                                        })
                                    }

But i have an error in IDE “TS2604: JSX element type FormatterComponent does not have any construct or call signatures.
TS2786: FormatterComponent cannot be used as a JSX component.
Its type Component<{}, {}, any> is not a valid JSX element type.”

Anyway i feels like i do some shit code and somethere exist patter for this.