Cell Background colors gets scrambled on sort or search

[KingsGithub]

I have set background colors using the formatter function shown below and when the table data is not disturbed, the colors are correct.
However, when I sort or search on any column or select the next page of data, then the colors begin to get scrambled.
The subsequent search, paging event or sorting event shows the colors that were put on in the first event and any subsequent event seemingly delivers semi-random colors from what was before.
I think it's because the setting of colors/formatting is keyed to the No. of the row being displayed instead of the id and actual ITEM of the data in that row.
In contrast if I simply use a direct Aurelia generated table via the repeat.for construct all the colours remain consistent as per the setting on the item being repeated, no matter how I scroll on the page. Admittedly there is no pagination being applied in that instance so I can't say if the same scrambling would happen - but I suspect not, because Aurelia would apply the conditions dynamically as it redraws the repeated items.

formatter: this.BgColorFormatter.ExproStatus  ===> Function being called.
ExproStatus : function (row, cell, value, columnDef, dataContext) {
            let item = dataContext;
            let rtn = { text: value, removeClasses: 'cellBgColorORANGE,cellBgColorRED,cellBgColorGREEN', addClasses :'', toolTip:'' };
            let backgroundColor="";
            if ( item.exproStatus  ==  "Withdrawn" || item.exproStatus  ==  "Outstanding"  ) backgroundColor = "cellBgColorORANGE";
            else if ( item.exproStatus  ==  "Expired"  )   backgroundColor = "cellBgColorRED";
            else if ( item.exproStatus  ==  "In Place"  )  backgroundColor = "cellBgColorGREEN";
            rtn.addClasses = backgroundColor;
            rtn.toolTip = 'testing the formmatting tooltip';
            return rtn;

EDIT: I've tried to find a work-around and have briefly looked at event processing but am not sure which event(s) would be best to use and on which object. onSort, onRowsChanged, onPagination... etc. Any advice would be appreciated. Thanks.
EDIT 2: Putting the colour and value in the tooltip shows the correct values. Seems like the CSS class somehow doesn't get applied correctly - either not done at all or else applied too late.
EDIT 3: Examining the actual items in the Chrome / Fox debugger shows the following for the class setting :
class="slick-cell l5 r5 cellBgColorORANGE cellBgColorREDPINK" or slick-cell l6 r6 cellBgColorORANGE cellBgColorGREEN
So somewhere, somehow the classes are NOT being removed/replaced. The example I've used shows another color in addition to those shown above...it's been added later.
The css Class being applied where there are two values is the one later in the sort order, e.g. between ORANGE AND REDPINK, the latter would apply and between ORANGE, GREEN, the former would be used.

[ghiscoding]

SlickGrid doesn't keep the cell content in synch, it only keeps a cell and column index, if you change sort/filter/page then the style will remain on the current cell position because the styling is applied on the cell/column index. You need to include logic yourself to handle all of that whenever a filter/sort/page is triggered, that will require to recalculate and reapply styling accordingly, this kind of logic is demoed in Slickgrid-Universal Example 12 (typically that would be Example 30 in here but I think I forgot to copy back some of the logic that changed when I encountered similar issue in universal).

https://github.com/ghiscoding/slickgrid-universal/blob/43f546cc93e1ebaffdc2dfd99ccfc9312e2cdd3d/examples/vite-demo-vanilla-bundle/src/examples/example12.ts#L660-L700

[KingsGithub]

Thanks for the response, I'll give this a try.