如何使用antd react实现动态行跨度

import { Table } from 'antd';
import 'antd/dist/antd.css';

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address',
  },
];

const data = [
  {
    key: '1',
    name: '张三',
    age: 18,
    address: '北京市',
  },
  {
    key: '2',
    name: '李四',
    age: 20,
    address: '上海市',
  },
  {
    key: '3',
    name: '王五',
    age: 22,
    address: '广州市',
  },
];

const getRowSpan = (text, dataIndex) => {
  let rowSpan = 1;
  for (let i = 0; i < data.length - 1; i++) {
    if (data[i][dataIndex] === text && data[i][dataIndex] === data[i + 1][dataIndex]) {
      rowSpan++;
    } else {
      break;
    }
  }
  return rowSpan;
};

<Table dataSource={data} columns={columns}>
  <Table.Column
    title="姓名"
    dataIndex="name"
    key="name"
    render={(text) => ({
      children: text,
      props: {
        rowSpan: getRowSpan(text, 'name'),
      },
    })}
  />
  <Table.Column
    title="年龄"
    dataIndex="age"
    key="age"
    render={(text) => ({
      children: text,
      props: {
        rowSpan: getRowSpan(text, 'age'),
      },
    })}
  />
  <Table.Column
    title="地址"
    dataIndex="address"
    key="address"
    render={(text) => ({
      children: text,
      props: {
        rowSpan: getRowSpan(text, 'address'),
      },
    })}
  />
</Table>