如何在antd表中为下级数据设置主展开行

import { Table } from 'antd';

const dataSource = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    children: [
      {
        key: '11',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 2 Lake Park',
      },
      {
        key: '12',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 3 Lake Park',
      },
    ],
  },
  {
    key: '2',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 3 Lake Park',
  },
];

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
];

const expandable = {
  expandedRowRender: (record) => {
    return (
      <p style={{ margin: 0 }}>{record.name}'s children</p>
    );
  },
  rowExpandable: (record) => {
    return record.children && record.children.length > 0;
  },
  expandRowByClick: true,
  expandIconColumnIndex: 0,
};

const App = () => {
  return (
    <Table
      dataSource={dataSource}
      columns={columns}
      expandable={expandable}
    />
  );
};

export default App;