Как объединить React TableCells внутри функции карты?

Итак, я пытаюсь создать таблицу с material-ui, в которой строки w1 и w2 объединены по вертикали, но я не могу найти решение. Использование rowSpan, когда таблица жесткого кодирования вручную работает нормально, но когда я использую ее внутри функции карты, она создает 4 столбца с объединенными строками одного и того же элемента. Мне нужно сопоставить данные, потому что в этой таблице будет много строк, и жесткое кодирование всех строк нецелесообразно.

Любое предложение, чтобы решить эту проблему?

<TableBody>
    {data.data.map((row, i) => (
        <TableRow key = {row.i}>
            <TableCell className = {classes.fontEditable} component = "th" scope = "row">
                {row.x1}
            </TableCell>
            <TableCell className = {classes.fontEditable} align = "right">
                {row.x2}
            </TableCell>
            <TableCell rowSpan = {4} className = {classes.fontEditable} align = "right">
                {row.w1}
            </TableCell>
            <TableCell rowSpan = {4} className = {classes.fontEditable} align = "right">
                {row.w2}
            </TableCell>
            <TableCell className = {classes.font} align = "right">
                {row.t}
            </TableCell>
        </TableRow>
    ))}
</TableBody>

Ожидаемый результат

Фактический результат