How to dynamically modify the coordinates and colors of the deck layer

[Rash-k]

I want to dynamically update the color of the deck layer coordinates. The base image uses mapbox. Here is my related code, but it keeps getting errors. Could you please help me check it? Thank you

This is the relevant code,This layer has already been rendered before and now requires dynamic color updates
const updateScatterLayerColors = () => {
deckOverlays.value.forEach((overlay, index) => {
if (index == 3) {
const layers = overlay._deck?.props?.layers || []
const updatedLayers = layers.map((layer: any) => {
if (layer instanceof ScatterplotLayer) {
const rawData = layer.props.data;
const plainData = Array.isArray(rawData) ? [...rawData] : rawData;
return new ScatterplotLayer({
// id: layer.props.id,
...layer.props,
data: plainData,
getFillColor: (d: any) => {
const v0Value = d['V0']
return calculateColorFromV0(v0Value, colorSettings.minColor, colorSettings.maxColor)
},
// getPosition: layer.props.getPosition,
// getLineColor: layer.props.getLineColor,
// getRadius: layer.props.getRadius,
// radiusScale: layer.props.radiusScale,
// radiusMinPixels: layer.props.radiusMinPixels,
// radiusMaxPixels: layer.props.radiusMaxPixels,
// opacity: layer.props.opacity,
// pickable: layer.props.pickable,
// autoHighlight: layer.props.autoHighlight,
// stroked: layer.props.stroked,
// onClick: layer.props.onClick,
// visible: true
})
}
return layer
})
if (overlay._deck && updatedLayers.length > 0) {
console.log(updatedLayers)
overlay._deck.setProps({ layers: updatedLayers })
}
}
})
}

This is an error on the console. I have tried many methods but have not been able to solve it

deck: matching of ScatterplotLayer({id: 'surface-1967534947533254657'}): 'get' on proxy: property 'data' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '[object Array]' but got '[object Array]') TypeError: 'get' on proxy: property 'data' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '[object Array]' but got '[object Array]')

[ibgreen]

• deck.gl layers are not mutable.
• You update your data, create a new layer with the same id and the set the data prop to the updated data then ask deck.gl to rerender.
• If you modify your data instead of providing a new array, you will need to let deck.gl know that the data has changed. You can use the updateTriggers prop for this.