How to add fog on the map?

[nonoumasy]

I'm not sure what the correct terminology is, but I would like mask some parts of the map to give focus to certain parts like the center. I've done it before with CSS on Mapbox but I can't figure where to add this class using RGMA.

DEMO:
https://nyhd1.csb.app/

This is the jsx the my Map Component returns:

<div className="map-container">
     <GoogleMap
       onLoad={onLoad}
       zoom={zoomLevel}
       center={center}
       options={{
         minZoom: 10,
         maxZoom: 18
       }}
       mapContainerClassName="map"
       onClick={() => setSelectedItem(null)}
     >
       {selectedItem ? (
         <InfoBox options={options} position={center}>
           <div className="info-box">
             <CardDetail item={selectedItem} />
           </div>
         </InfoBox>
       ) : null}
       <MapMarker data={data} center={center} />
     </GoogleMap>
   </div>

[nonoumasy]

.fog {
position: absolute;
inset: 0;
background: radial-gradient(
rgba(255, 255, 255, 0.1) 50%,
rgba(255, 255, 255, 0.9) 75%,
rgba(255, 255, 255, 1) 100%
);
pointer-events: none;
}