Adding new layers to Deck.GL Map in React

Question

What is the correct way to add layers to a Deck.GL map, when using the React component?

I'm building an app using React, Deck.GL as the mapping library, and Recoil for state management. All three are new to me, so there's been a steep learning curve!

I've tried setting the layers property of the Deck component to read directly from the state in recoil (code simplified for readability):

import { useEffect } from 'react';
import { StaticMap, NavigationControl, MapContext } from "react-map-gl";
import { useRecoilState, useRecoilValue } from "recoil";
import { stateMapView, selMapLayersArray } from "../../store";

const Map = () => {

    const MAPBOX_ACCESS_TOKEN = "xxx"
    const NAV_CONTROL_STYLE = {
        // Nav control settings...
    }

    // Get layers and map viewport state from recoil store
    const mapLayersArray = useRecoilValue(selMapLayersArray);
    const [mapViewObject, setMapViewObject] = useRecoilState(stateMapView);

    return (
        <div id="map" style={{ height: '77vh', width: '100vw', position: 'relative' }}>

            <DeckGL
                viewState={mapViewObject}
                controller={true}
                layers={mapLayersArray}
                ContextProvider={MapContext.Provider}
                onViewStateChange={(e) => setMapViewObject(v => (e.viewState))}
            >
                <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
                <NavigationControl style={NAV_CONTROL_STYLE} />
            </DeckGL>
            <IsoMapControl />
        </div>
    )

}

export default Map;

The initial state of selMapLayersArray is an empty array. Whenever I add new Deck.gl layers to this array, the application throws an error:

Unhandled Runtime Error
TypeError: Cannot assign to read only property 'context' of object '[object Object]'

As it's saying that this object is read-only, I'm assuming there's some other mechanism for updating the layers in an existing map. What's the best way to do this?