DatagridPro 不会用反应测试库开玩笑地渲染列，即使在我给它列之后也是如此。测试用例越来越失败

Question

有人提到使用 disableVirtualization，但它仍然没有渲染，而且排序也不起作用。是否需要在列中传递 id？但我不想在表列中显示 id 但是，可隐藏的道具也不起作用

测试用例 `

  test("user management update user", async () => {
    const tree = renderWithProviders(
      <BrowserRouter>
        <UserManagement />
      </BrowserRouter>,
      { store }
    );
    expect(tree).toMatchSnapshot();
    const handleStatus = screen.getAllByTestId("update-status");
    expect(fireEvent.click(handleStatus[0])).toBe(true);
    const handleEdit = screen.getAllByTestId("editRow");
    expect(fireEvent.click(handleEdit[0])).toBe(true);
  });`

<DataGridPro
          disableColumnMenu
          autoHeight
          rows={searchValue ? searchResults : users}
          columns={[
            {
              field: "name",
              headerName: "Name",
              flex: 1,
              renderCell: (params: GridCellParams) => {
                const rowData: UserData = params.row;
                return `${rowData.first_name} ${rowData.last_name}`;
              },
            },
            {
              field: "status",
              headerName: "Status",
              flex: 1,
              renderCell: (params: GridCellParams) => {
                const rowData: UserData = params.row;
                const isChecked: boolean = rowData.is_active;
                return (
                  <Box
                    data-testid="update-status"
                    onClick={() => {
                      handleStatus(rowData.id as string, rowData.is_active);
                    }}
                  >
                    <Switch checked={isChecked} />
                  </Box>
                );
              },
            },
            {
              field: "role",
              headerName: "Role",
              flex: 1,
              renderCell: (params: GridCellParams) => {
                const rowData: UserData = params.row;
                return `${rowData.role.role_name}`;
              },
            },
            {
              field: "actions",
              headerName: "",
              flex: 1,
              sortable: false,
              align: "right",
              renderCell: (params: GridCellParams) => {
                const rowData: UserData = params.row;
                return (
                  <div style={{ display: "flex", justifyContent: "flex-end", paddingRight: "1rem" }}>
                    <EditUserIconDiv
                      data-testid="editRow"
                      onClick={() => {
                        navigate(`edit-user/${rowData.id}`);
                        handleEdit(rowData);
                      }}
                    >
                      <EditIcon />
                    </EditUserIconDiv>
                    <DeleteUserIconDiv
                      data-testid="delete-user"
                      onClick={() => {
                        setSelectedUser(rowData);
                        handleDeleteModal(true, "delete");
                      }}
                    >
                      <DeleteIcon />
                    </DeleteUserIconDiv>
                  </div>
                );
              },
            },
          ]}
          disableRowSelectionOnClick
          hideFooterRowCount
          sx={dataGridStyles}
          slots={{
            columnSortedAscendingIcon: SortingIcon,
            columnSortedDescendingIcon: SortingIcon,
          }}
          disableVirtualization
          sortingOrder={["asc", "desc"]}

    />

我试过使用 disableVirtualization=true 和 columnBuffer={8}，还是不行。