Uncaught error 'source-id' is already added to the map

[lcoursey]

Uncaught error 'source-id' is already added to the map I can trigger this error by toggling a rendered data source and layer. For example by toggling the value of showLayer off and on again:

const { showLayer } = props;

return (
    {showLayer 
        ?
        <AzureMapDataSourceProvider
              id={`source-id`}
              collection={someGeojson}
          >
          <AzureMapLayerProvider
              id={`layer-id`}
              options={{}}
              type='LineLayer'
          />
      </AzureMapDataSourceProvider> : null
    }
)

It looks like data source cleanup is not being done by react-azure-maps?

If I manually remove the source and layer in a cleanup useEffect:

useEffect(() => {
 return () => {
    map.layers.remove('layer'id');
    map.sources.remove('source-id);
}
}, []);

It fixes the error, but then I get further errors from the wrapper as it tries to remove the layers itself: Error on remove layer Error: The layer 'layer-id' has not been added to the map and cannot be removed

[jithureddy]

Conditional rendering of Source Provider does not cleanup the context properly, so better to use layer options visible prop and pass the relevant feature collection when the layer needs to be visible.