Ensure any existing layers get cleared when previewing a new one (#31973

) (#31981)

x-pack/plugins/maps/public/components/layer_addpanel/index.js

@@ -30,7 +30,12 @@ function mapDispatchToProps(dispatch) {
     closeFlyout: () => {
       dispatch(clearTransientLayerStateAndCloseFlyout());
     },
-    previewLayer: layer => {
+    previewLayer: async (layer) => {
+      //this removal always needs to happen prior to adding the new layer
+      //many source editors allow users to modify the settings in the add-source wizard
+      //this triggers a new request for preview. Any existing transient layers need to be cleared before the new one can be added.
+      await dispatch(setSelectedLayer(null));
+      await dispatch(removeTransientLayer());
       dispatch(addLayer(layer.toLayerDescriptor()));
       dispatch(setSelectedLayer(layer.getId()));
       dispatch(setTransientLayer(layer.getId()));