Reactjs 嵌套材质ui表使用递归函数对树型数据结构，如何对齐列？

我有一个嵌套的材质ui，其代码是一个表，其中显示了任务的待办事项列表。我使用树状结构来存储任务及其子任务等。我遇到的问题是，表的列彼此不对齐或标题不对齐，我认为这是由于tableRow和Collapse组件周围的div标记，可能还有Collapse组件，但是我不确定如果没有这些，如何重写代码，因为函数必须为任务数据呈现一行，并在折叠组件中对任务的子项递归运行函数以呈现它们。

我已经实现了一个非常有效的解决方案

表行的此特定函数中存在两个问题：

function treeTable(taskTree) {
    return taskTree.children.map(task => (
      <div>
        <TableRow hover key={task.value.id}>
          {headers.map(({ key, format = value => value }) => (
            <TableCell>{format(task.value[key])}</TableCell>
          ))}
          <TableCell padding="default">
            {task.children.length > 0 ? (
              <Button
                key={task.value.id}
                onClick={() => handleClick(task.value.id)}
              >
                {state[task.value.id] ? <ExpandLess /> : <ExpandMore />}
              </Button>
            ) : null}
          </TableCell>
        </TableRow>
        <Collapse
          key={task.value.id}
          // component="table"
          in={state[task.value.id]}
          timeout="auto"
          unmountOnExit
        >
          {treeTable(task)}
        </Collapse>
      </div>
    ));
  }

function treeTable(taskTree, collapseId) {
    return taskTree.children.map(task => (
      <React.Fragment>
        <TableRow hover key={task.value.id}>
        {headers.map(({ key, format = value => value }) => (
            <TableCell style={{ padding: 0 }}>
              <Collapse
                key={collapseId}
                // component="table"
                in={state[collapseId]}
                timeout="auto"
                unmountOnExit
              >
                {format(task.value[key])}
              </Collapse>
            </TableCell>
          ))}
          <TableCell style={{ padding: 0 }}>
            <Collapse
              key={collapseId}
              // component="table"
              in={state[collapseId]}
              timeout="auto"
              unmountOnExit
            >
              {task.children.length > 0 ? (
                <Button
                  key={task.value.id}
                  onClick={() => handleClick(task.value.id)}
                >
                  {state[task.value.id] ? <ExpandLess /> : <ExpandMore />}
                </Button>
              ) : null}
            </Collapse>
          </TableCell>
        </TableRow>
        {treeTable(task, task.value.id)}
      </React.Fragment>
    ));
  }