如何在每次迭代map函数后呈现不同的组件

import React from 'react';

// 子组件
const ItemComponent = ({ item }) => {
  // 根据传递的数据渲染不同的内容
  return (
    <div>
      <h3>{item.title}</h3>
      <p>{item.description}</p>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  // 定义包含每个迭代项的数据数组
  const items = [
    { title: 'Item 1', description: 'Description 1' },
    { title: 'Item 2', description: 'Description 2' },
    { title: 'Item 3', description: 'Description 3' },
  ];

  return (
    <div>
      {/* 使用map函数遍历数据数组，为每个迭代项创建子组件 */}
      {items.map((item, index) => (
        <ItemComponent key={index} item={item} />
      ))}
    </div>
  );
};

export default ParentComponent;