Is there a way to group rows by a nested data using TanStack table v8?

Question

It appears that Tanstack Table cannot group rows based on nested data.

this is my document structure

type Team = {
id:number;
name:string;
number_players : number;
}

type Person = {
id:number;
age:number;
fullname:string;
team?: Team;
}

// useReactTable hook from tanstack

 const [grouping, setGrouping] = useState<GroupingState>(["team.name"]);
  const [expanded, setExpanded] = useState<ExpandedState>({});
  const table = useReactTable({
    columns,
    data,
    state: {
      grouping,
      expanded
    },
    onGroupingChange: setGrouping,
    onExpandedChange: setExpanded,
    getCoreRowModel: getCoreRowModel(),
    getGroupedRowModel: getGroupedRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    autoResetExpanded: false,
    initialState: {
      expanded: true
    }
  });

// and this is how I'm populating the data

<TableContainer>
              <Table variant="simple">
                <Thead>
                  <Tr>
                    {table
                      .getHeaderGroups()
                      .map((headerGroup) =>
                        headerGroup.headers.map((header) => (
                          <Th key={header.id}>
                            {header?.column?.columnDef.header?.toString()}
                          </Th>
                        ))
                      )}
                  </Tr>
                </Thead>
                <Tbody>
                  <SortableContext
                    items={dataIds}
                    strategy={verticalListSortingStrategy}
                  >
                    {table.getRowModel().rows.map((row) => (
                      <>
                        {row.getIsGrouped() && (
                          <Tr key={row.id}>
                            {row.getVisibleCells().map((cell) => (
                              <Td key={cell.id}>
                                {flexRender(
                                  cell.column.columnDef.cell,
                                  cell.getContext()
                                )}
                              </Td>
                            ))}
                          </Tr>
                        )}
                        {row.getIsExpanded() &&
                          row.subRows.map((subrow) => (
                            <Tr key={subrow.id}>
                              <>
                                {subrow.getVisibleCells().map((cell) => (
                                  <Td key={cell.id}>
                                    {flexRender(
                                      cell.column.columnDef.cell,
                                      cell.getContext()
                                    )}
                                  </Td>
                                ))}
                              </>
                            </Tr>
                          ))}
                      </>
                    ))}
                  </SortableContext>
                </Tbody>
              </Table>
            </TableContainer>

I expected to see a table with grouped data, but it seems to work correctly only with a normal string attribute. When I change the grouping to const [grouping, setGrouping] = useState(["age"]);, the data groups correctly. Is there something I'm doing wrong? I would appreciate your feedback.