expanded rows doesn't work

[adlid]

`

const [expandedRows, setExpandedRows] = useState<string[]>([]);

  const handleRowExpansion = (recordId) => {
    if (expandedRows.includes(recordId)) {
      setExpandedRows(expandedRows.filter((id) => id !== recordId));
    } else {
      setExpandedRows([...expandedRows, recordId]);
    }
  };

<DataTable
        columns={[
          {
            accessor: 'name',
            title: 'Name',
            render: (record, index) => {
              return (
                <Group spacing="xs">
                  <IconChevronRight
                    size="0.9em"
                    className={cx(classes.expandIcon, {
                      [classes.expandIconRotated]: expandedRows.includes(
                        record.key
                      ),
                    })}
                  />
                  <Text>{record.name}</Text>
                </Group>
              );
            },
          },
        ]}
        records={data}
        rowExpansion={{
          allowMultiple: true,
          expanded: {
            recordIds: expandedRows,
            onRecordIdsChange: (recordIds: unknown[]) => console.log(recordIds),
          },
          content: ({ record }) => {
            console.log(record);

            return (
              <DataTable
                noHeader
                columns={[{ accessor: 'name', title: 'Name' }]}
                records={child.filter((item) => item.parent === record.key)}
              />
            );
          },
        }}
        onRowClick={(record) => handleRowExpansion(record.key)}
      />

`
onRecordIdsChange always return [undefined] and when i tried get row id's with onRowClick and save value to state expandedRows. With this case rows can't expanded