如何使用React处理关键属性来显示组件集合的集合？

import React from 'react';

// 子组件，用于显示单个组件
const ComponentItem = ({ keyProp }) => {
  return <div>{keyProp}</div>;
};

// 父组件，用于管理和显示组件集合的集合
const ParentComponent = () => {
  // 定义状态变量，存储组件集合的集合
  const componentCollections = [
    [{ keyProp: 'A' }, { keyProp: 'B' }],
    [{ keyProp: 'C' }, { keyProp: 'D' }],
  ];

  return (
    <div>
      {/* 遍历组件集合的集合 */}
      {componentCollections.map((componentCollection, index) => (
        <div key={index}>
          {/* 遍历组件集合 */}
          {componentCollection.map((component, index) => (
            <ComponentItem key={index} keyProp={component.keyProp} />
          ))}
        </div>
      ))}
    </div>
  );
};

export default ParentComponent;