Cell ids broken... cell-1-undefined

[kitingChris]

Issue Check list

• [x] Agree to the Code of Conduct
• [x] Read the README
• [x] You are using React 16.8.0+
• [x] You installed styled-components
• [x] Include relevant code or preferably a code sandbox

Describe the bug

All my cells get an undefined in its id. Looks like the column id is not correctly merged into the cell id??

<div id="cell-1-undefined" data-column-id="1" role="cell" class="sc-gwsNht sc-dYOLZc sc-jMpmlX kfjIYX dYjDdw fBevtM rdt_TableCell" data-tag="allowRowEvents"><div data-tag="allowRowEvents">HM_DE</div></div>

It does not affect all tables but I don't see any issue that may cause this in my column definition:

    const columns: TableColumn<DeviceListDTOTableRow>[] = [
        {
            name: 'Mandant',
            selector: (row) => row.client ?? "",
        },
        {
            name: 'Serien-Nr.',
            selector: (row) => row.serialNumber,
        },
        {
            name: 'Auftrags-Nr.',
            selector: (row) => {
                return row.orderNumber ?? ""
            },
        },
        {
            name: 'Mietende',
            selector: (row) => {
                return row.rentalEnd ? formatDate(row.rentalEnd) : ""
            },
        },
        {
            name: 'Kontakt',
            selector: (row) => row.contact ? row.contact : "",
        },
        {
            name: 'Lieferant',
            selector: (row) => row.defaultSupplierName ? row.defaultSupplierName : "",
        },
        {
            name: 'Standort',
            selector: (row) => row.address ? row.address : "",
        },
        {
            name: 'Fehlerstatus',
            cell: (row) => <ErrorStateBulbs states={row.errorStates ?? "?"} />,
        },
        {
            name: 'Aktualisiert',
            selector: (row) => formatDateTime(row.lastUpdate) ?? "?",
        },
        {
            name: 'Temperatur',
            cell: (row) => <TemperatureStateBulbs states={row.temperatures ?? "?"} />,
        },
        {
            name: 'Tank (max/fehlt/%)',
            cell: (row) => <TankPills tankLevel={row.tankLevel} />,
        },
        {
            name: 'Level in Liter',
            cell: (row) => <AreaChartMini data={mapTankHistoryToChartData(row.tankLevel.history)} />,
            //ignoreRowClick: true,
            //allowOverflow: true,
            //center: true,
        },
        {
            name: 'Verbrauch 3 Tage',
            cell: (row) => <ConsumptionPills data={row.tankLevel.consumption ?? null} />,
            //center: true,
        },
        {
            name: 'Brenndauer',
            selector: (row) => `${row.runDuration} h`,
            //center: true,
        },
        {
            name: 'Notiz',
            selector: (row) => row.note,
        },
        {
            name: '',
            cell: (row) => <>
                <Link href={`/devices/${row.deviceIdentifier}`}>
                    <FontAwesomeIcon icon={faEye} />
                </Link>
                &nbsp;&nbsp;
                <a onClick={() => fuelOrderModalOpenHandler(row.deviceIdentifier, row.tankLevel.missing)}
                    role="button"
                    className="cursor-pointer"
                >
                    <FontAwesomeIcon icon={faGasPump} />
                </a>
            </>,
        },
    ];

                                <DataTable
                                    columns={columns}
                                    data={devices}
                                    progressPending={loading}
                                    pagination
                                    paginationServer
                                    paginationTotalRows={totalRows}
                                    onChangeRowsPerPage={handlePerRowsChange}
                                    onChangePage={handlePageChange}