有没有办法在React中创建一个嵌套的数据表？

import React from 'react';

// 子组件，用于渲染每一行的数据
const TableRow = ({ data }) => {
  return (
    <tr>
      <td>{data.name}</td>
      <td>{data.age}</td>
      {/* 嵌套的子数据表 */}
      {data.children && data.children.map(child => (
        <TableRow key={child.id} data={child} />
      ))}
    </tr>
  );
};

// 父组件，用于渲染整个数据表
const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {/* 遍历数据列表，渲染每一行 */}
        {data.map(item => (
          <TableRow key={item.id} data={item} />
        ))}
      </tbody>
    </table>
  );
};

// 使用示例
const App = () => {
  const data = [
    {
      id: 1,
      name: 'John',
      age: 25,
      children: [
        {
          id: 2,
          name: 'Alice',
          age: 20,
          children: [
            {
              id: 3,
              name: 'Bob',
              age: 18,
              children: []
            }
          ]
        }
      ]
    },
    {
      id: 4,
      name: 'Jane',
      age: 30,
      children: []
    }
  ];

  return (
    <div>
      <h1>Data Table</h1>
      <DataTable data={data} />
    </div>
  );
};

export default App;