onSelectionChanged from detaillist not firing fluentui react

Question

I built a custom pagination and need to sustain the selection across these renders.

So if the user selects item 1 on page 1, switches to page 2, then switches back, I need to reselect item 1.

For some reason onSelectionChanged isnt firing for me, even when I select/deselect items. This way I cant manage the selection...

const RelationalDataList: React.FC<IRelationalDataListProps> = (props) => {
//...
const handleSelectionChanged = () => {
        debugger;
    };

useEffect(() => {
    setSelection(() => {
        // TRY WITH NEW SELECTION ??
        if (!selectionProps) {
            return undefined;
        }
        const sel = new Selection({
            selectionMode: selectionProps.selectMultiple ? SelectionMode.multiple : SelectionMode.single,
            onSelectionChanged: handleSelectionChanged,
            canSelectItem: () => { return true; },
            items: [...list],
            getKey: (item) => {
                return item[getPrimaryKeyName(entityDefinition)];
            },
            onItemsChanged: () => { }

        });
        
        selectionProps.selectedIds.forEach((selectedId) => {
            sel.setKeySelected(selectedId, true, false);
        });

        return sel;
    });
}, []); // only one instance

  //somewhere down the line:

   
const listComponent = useMemo(() => {
    const listElement = <DetailsList
        selectionMode={selectionProps ? (selectionProps.selectMultiple ? SelectionMode.multiple : SelectionMode.single) : SelectionMode.none}
        items={list}
        columns={columns}
        selection={selection}
        selectionPreservedOnEmptyClick={true}
        getKey={(item) => { return item[pkPropName]; }}
        layoutMode={DetailsListLayoutMode.fixedColumns}
        onRenderCheckbox={(defaultProps, defaultRender) => {
            return <Stack styles={{
                root: {
                    paddingTop: '11px'
                }
            }}>{defaultRender && defaultRender(defaultProps)}</Stack>;
        }}
        styles={...}

    />;

    if (!maxHeight) {
        return <AutoSizer>
            {({ height, width }) => {
                return <Stack className='list-sizer' styles={{
                    root: {
                        height,
                        width
                    }
                }}>
                    {listElement}
                </Stack>;
            }}
        </AutoSizer>;
    }

    return listElement;
}, [selectionProps, list, columns, selection, maxHeight, pkPropName]);

In this case, the debugger is weirdly initiated once on load and then never again, even after selecting/deselecting items...