React.js中如何基于动态深层嵌套数据生成带rowSpan的层级表格

我需要将分类数据映射到表格中，最终呈现效果与参考示例图一致：

• 当一级分类下存在对应子分类时，该分类的单元格需要跨对应数量的行合并显示
• 子分类单元格同理，需要根据其下属的孙分类数量实现对应行数的跨行合并，完全匹配预期的展示效果

我想确认能否在React.js中编写对应的数据映射函数来实现该效果？我整理了参考的JSON结构，如果实现过程中需要调整JSON结构也可以。参考JSON如下：

[
    {
        "category_id": 6,
        "parent_id": null,
        "name": "Western Wear",
        "slug": "western-wear",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 7,
                "parent_id": 6,
                "name": "Jumpsuite and Rompers",
                "slug": "jumpsuite-and-rompers",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 10,
                        "parent_id": 7,
                        "name": "Rompers",
                        "slug": "rompers",
                        "sort_order": 0
                    },
                    {
                        "category_id": 11,
                        "parent_id": 7,
                        "name": "Jumpsuite",
                        "slug": "jumpsuite",
                        "sort_order": 0
                    }
                ]
            },
            {
                "category_id": 8,
                "parent_id": 6,
                "name": "Dresses",
                "slug": "dresses",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 9,
                        "parent_id": 8,
                        "name": "Dress",
                        "slug": "dress",
                        "sort_order": 0
                    }
                ]
            }
        ]
    },
    {
        "category_id": 7,
        "parent_id": 6,
        "name": "Jumpsuite and Rompers",
        "slug": "jumpsuite-and-rompers",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 10,
                "parent_id": 7,
                "name": "Rompers",
                "slug": "rompers",
                "sort_order": 0,
                "subSubCategoryData": []
            },
            {
                "category_id": 11,
                "parent_id": 7,
                "name": "Jumpsuite",
                "slug": "jumpsuite",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 8,
        "parent_id": 6,
        "name": "Dresses",
        "slug": "dresses",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 9,
                "parent_id": 8,
                "name": "Dress",
                "slug": "dress",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 9,
        "parent_id": 8,
        "name": "Dress",
        "slug": "dress",
        "sort_order": 0,
        "subCategoryData": []
    }
]

以下是我目前编写的表格组件代码，暂未正确实现单元格跨行合并的逻辑：

<table className="admin-table">
    <thead className="tbl-head">
        <tr className="tbl-head-raw">
            {/* <th>Gender</th> */}
            <th>Category</th>
            <th>Sub-Category</th>
            <th>Sub-Sub-Category</th>
            <th>Created on<br />Updated on</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        {data.map((category, idx) => 
            <tr>
                {/* <td rowSpan={12}>Women</td> */}
                <td>{category.name}</td>
                <td rowSpan={category.subCategoryData[0]?.subSubCategoryData?.length}>
                    {category.subCategoryData[0]?.name}
                </td>
                {/* <td>{category.subSubCategoryData?.[0]?.name}</td> */}
                <td>{'updated at'}</td>
                <td>{category.slug}</td>
                <td>
                    <label className="switch">
                        <input type="checkbox" />
                        <span className="slider round" />
                    </label>
                </td>
                <td className="edit-view-icon flex">
                    <div className="edit-icon">
                        <SVG name="#icon-edit" />
                    </div>
                    <div className="view-icon">
                        <SVG name="#icon-eye" />
                    </div>
                </td>
            </tr>
        )}
    </tbody>
</table>

内容的提问来源于stack exchange，提问作者Sumair