React dynamic page render by api response

Question

I have an api that returns JSON with object array {component_name: string, component_data: any}. Based on this response render react page using function with switch-case by component_name and pass data to component in this case. I have many componets and this switch is very large. Can it be solved differently?

code snippet eg.

import Header from "./Header";
import Link from "./Link";
import Image from "./Image";

const pageComponents = (pageJson) => pageJson.map(p => {
  switch(p.component_name) {
     case: 'header': {
       return <Header content={p.component_data.text} />

     case: 'link': {
       return <Link content={p.component_data.text} href={p.component_data.src} />

     case: 'image': {
       return <Image src={p.component_data.src} alt={p.component_data.alt} />

     }
   }
});



const EgPage = () => {

const pageJSON = [
 {component_name: 'header', component_data: {text: 'Heder text 1'}},
 {component_name: 'link', component_data: {text: 'Heder text 2', src: 'www.test.com'}},
 {component_name: 'image', component_data: {src: 'www.test.img/1.jpg', alt: 'Test img'},
 {component_name: 'header', component_data: {text: 'Heder text 2'},
]

return <div>{pageComponents(pageJSON)}</div>
}