如何在React中渲染多个嵌套数组对象？

import React from 'react';

const data = [
  {
    id: 1,
    name: 'John',
    hobbies: ['reading', 'painting']
  },
  {
    id: 2,
    name: 'Jane',
    hobbies: ['music', 'gaming']
  }
];

class NestedArrayRendering extends React.Component {
  render() {
    return (
      <div>
        {data.map((item) => (
          <div key={item.id}>
            <h2>{item.name}</h2>
            <ul>
              {item.hobbies.map((hobby, index) => (
                <li key={index}>{hobby}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<NestedArrayRendering />, document.getElementById('root'));