如何在ReactJS中嵌套3个映射循环函数

const data = [
  {
    id: 1,
    name: 'Category 1',
    items: [
      {
        id: 1,
        name: 'Item 1',
        subItems: [
          { id: 1, name: 'SubItem 1' },
          { id: 2, name: 'SubItem 2' }
        ]
      },
      {
        id: 2,
        name: 'Item 2',
        subItems: [
          { id: 3, name: 'SubItem 3' },
          { id: 4, name: 'SubItem 4' }
        ]
      }
    ]
  },
  {
    id: 2,
    name: 'Category 2',
    items: [
      {
        id: 3,
        name: 'Item 3',
        subItems: [
          { id: 5, name: 'SubItem 5' },
          { id: 6, name: 'SubItem 6' }
        ]
      }
    ]
  }
];

import React from 'react';

const NestedMappingExample = () => {
  return (
    <div>
      {data.map((category) => (
        <div key={category.id}>
          <h2>{category.name}</h2>
          {category.items.map((item) => (
            <div key={item.id}>
              <h3>{item.name}</h3>
              {item.subItems.map((subItem) => (
                <div key={subItem.id}>
                  <p>{subItem.name}</p>
                </div>
              ))}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
};

export default NestedMappingExample;