Change colour of clicked item in deck.gl - reactjs

Question

I'm trying to achieve the same behaviour that we have with the autoHighlight prop on mobile where clicking on an item 'selects' it and changes its colour. I managed to make it work with the updateTriggers prop of deck.gl but I feel like I'm missing something because the update takes 3 seconds and the layer isn't responsive in this time.
Here's what a have so far:
const App = () => {
const [selectedItem, setSelectedItem] = useState(null);
const layers = [
new H3ClusterLayer({
id: 'h3-cluster-layer',
data,
pickable: true,
stroked: true,
filled: true,
extruded: false,
getHexagons: d => d.hexIds,
getFillColor: hexagon => {
if (selectedItem && hexagon.hexIds[0] === selectedItem.hexIds[0]) return [25,116,210]
if (hexagon.mean === undefined) return [122, 122, 122];
return [255, (1 - hexagon.mean / 500) * 255, 0];
},
updateTriggers: {
getFillColor: [selectedItem]
},
getLineColor: [255, 255, 255],
lineWidthMinPixels: 1,
opacity: 0.03,
autoHighlight: true,
highlightColor: [142,223,255],
}),
];
return (
<DeckGL
initialViewState={initialViewState}
controller={true}
layers={layers}
onClick={(info, event) => {
// event bubble cancelation doesn't work between react components and deck.gl
if (event.target !== document.getElementById('view-default-view')) return;
setSelectedItem(info.object)
}}
>
<StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
{selectedItem && <Details selectedItem={selectedItem} />}
</DeckGL>
);
}

Answer 1

For anyone coming across this: rerendering of the layer works perfectly if you only pass the id (rather than the whole object) to updateTriggers. In my case I just needed to pass the following to updateTriggers:
updateTriggers: {
getFillColor: [selectedItem ? selectedItem.hexIds[0]: null]
},