如何在ReactJs中循环和渲染来自数组的不同组件？

import React from 'react';

const data = [
  { id: 1, name: 'ComponentA' },
  { id: 2, name: 'ComponentB' },
  { id: 3, name: 'ComponentC' },
];

const App = () => {
  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          {item.name === 'ComponentA' && <ComponentA />}
          {item.name === 'ComponentB' && <ComponentB />}
          {item.name === 'ComponentC' && <ComponentC />}
        </div>
      ))}
    </div>
  );
};

const ComponentA = () => {
  return <h1>Component A</h1>;
};

const ComponentB = () => {
  return <h1>Component B</h1>;
};

const ComponentC = () => {
  return <h1>Component C</h1>;
};

export default App;