Which Design pattern should i choose for creating components from a database

My client has designed a database which has a element table which enables them to return a component's JSON and i build the said component using that JSON, the thing is they have used their own standard type and names, and it was deiced that i build a .JS file for each type of component they have, even if someone of them are basically the same thing in reactjs, let me explain this with an example,
Consider me having a component Form which has three types "Reporting"
"Dashboard"
"SimpleForm"
Each of these types in my React program is essentially the same things, at least for now until the client says for example Reporting should this and that extra features.
So i create three .JS file each with the name of these three types, and inside them i want to create a Material UI card for now, because for now i think they are all simply a Material UI Card,
So should i simply inherit Material UI Card in each of these classes ? or should i simply create a Card inside them and return it?
So basically the question is
Class component inheritance or importing in a function component? Which one should i choose?,
By the way the reason i am creating a .JS file for each type, is because i am using dynamic import and i give the type to the import like this:

const Component = loadable(props => import(`${props.ComponentType}`), {
    fallback: <div>Loading...</div>
})  

In any case i am really confused, we don't have experienced react developer here and i'm not sure which is best way to go
Thanks.