I am using GeoJsonLayer to render some vector data.

I have also a list of texts where each text corresponds to a layer,and there can be several layers(passed to DeckGl as prop).

I want behaviour such that when user hovers over the text, corresponding layer gets highlighted.

So my approach is to maintain a map of text vs geojson-layer-instance, and whenever user hovers, I iterate through the map to get corresponding intance of GeoJsonLayer, and create new instance of GeoJsonLayer with prev props(layer.props) and a new getFillColor(some different color to highlight the features in it), and then I update the layers list using setState hook.

const updateLayer = () => {
    setLayers((key, layer) =>
      key === text-selected
          ? new GeoJsonLayer({
              ...layer.props,
               
              getFillColor: [0, 255, 0],
            })
          : layer
      )
    );
  };

But what I observe is that geo-data disappears from the map when I update layers this way.

What am I missing in my approach?