let suppose we have a json data that includes the components information like name and props etc.

const jsonData = [
  {'id': '1', 'componentName': 'home', 'componentProps': {'description': 'home component'}},
  {'id': '2', 'componentName': 'footer', 'componentProps': {'description': 'footer component'}}, 
  {'id': '3', 'componentName': 'header', 'componentProps': {'description': 'header component'}},
]

Lets pass this jsonData to the DynamicComponent like <DynamicComponent data={jsonData} />

See the App.js file

import React from 'react';
import DynamicComponent from './DynamicComponent';

const jsonData = [
  {'id': '1', 'componentName': 'home', 'componentProps': {'description': 'home component'}},
  {'id': '2', 'componentName': 'footer', 'componentProps': {'description': 'footer component'}}, 
  {'id': '3', 'componentName': 'header', 'componentProps': {'description': 'header component'}},
]

export default function App() {
  return (
       <DynamicComponent data={jsonData} /> 
  );
}

Lets create the DynamicComponent component

Note: Here I am using in operator. The in operator returns true if the specified property is in the specified object or its prototype chain.

Instead of in operator you can use arrow notation componentObject[item.componentName]

import React from 'react';
import Home from './Home';
import Header from './Header';
import Footer from './Footer';

const componentObject = {
    home: Home,
    header: Header,
    footer: Footer
}
export default function DynamicComponent(props) {
    const components =  []
    props.data.forEach((item) => {
        if(item.componentName in componentObject) {
            const MyComponentName = componentObject[item.componentName];
            const MyComponent = <MyComponentName {...item.componentProps} />
            components.push(MyComponent);
        }
    });
    
    return (components);
}

See the definition of Home, Header and Footer components: This is Home.js file

import React from 'react';
export default function Home(props) {

    return (<p>This is {props.description}</p>)
}

This is Header.js file

import React from 'react';
export default function Header(props) {

    return (<p>This is {props.description} </p>)
}

This is Footer.js file

import React from 'react';
export default function Footer(props) {

    return (<p>This is {props.description}</p>)
}

Hope you understand the code. If you have better solutions please tell me here.

Thank you!