diff --git a/src/components/side-panel.js b/src/components/side-panel.js
index 291f68d487..20f97c1845 100644
--- a/src/components/side-panel.js
+++ b/src/components/side-panel.js
@@ -96,7 +96,6 @@ export default function SidePanelFactory(
   MapManager,
   CustomPanels
 ) {
-  const customPanels = get(CustomPanels, ['defaultProps', 'panels']) || [];
   const getCustomPanelProps = get(CustomPanels, ['defaultProps', 'getProps']) || (() => ({}));
 
   class SidePanel extends PureComponent {
@@ -188,12 +187,12 @@ export default function SidePanelFactory(
         visStateActions,
         mapStyleActions,
         uiStateActions,
-        availableProviders
+        availableProviders,
+        panels
       } = this.props;
 
       const {activeSidePanel} = uiState;
       const isOpen = Boolean(activeSidePanel);
-      const panels = [...this.props.panels, ...customPanels];
 
       const layerManagerActions = {
         addLayer: visStateActions.addLayer,
@@ -304,12 +303,10 @@ export default function SidePanelFactory(
                 {activeSidePanel === 'map' && (
                   <MapManager {...mapManagerActions} mapStyle={this.props.mapStyle} />
                 )}
-                {(customPanels || []).find(p => p.id === activeSidePanel) ? (
-                  <CustomPanels
-                    {...getCustomPanelProps(this.props)}
-                    activeSidePanel={activeSidePanel}
-                  />
-                ) : null}
+                <CustomPanels
+                  {...getCustomPanelProps(this.props)}
+                  activeSidePanel={activeSidePanel}
+                />
               </div>
             </SidePanelContent>
           </Sidebar>
diff --git a/test/browser/components/side-panel/side-panel-test.js b/test/browser/components/side-panel/side-panel-test.js
index e798d110ce..620fd61eb2 100644
--- a/test/browser/components/side-panel/side-panel-test.js
+++ b/test/browser/components/side-panel/side-panel-test.js
@@ -198,18 +198,6 @@ test('Components -> SidePanel -> render custom panel', t => {
   };
 
   MyPanels.defaultProps = {
-    panels: [
-      {
-        id: 'rocket',
-        label: 'Rocket',
-        iconComponent: RocketIcon
-      },
-      {
-        id: 'chart',
-        label: 'Chart',
-        iconComponent: ChartIcon
-      }
-    ],
     getProps: props => ({
       layers: props.layers
     })
@@ -219,9 +207,33 @@ test('Components -> SidePanel -> render custom panel', t => {
     return MyPanels;
   }
 
+  function CustomSidePanelFactory(...deps) {
+    const CustomSidePanel = SidePanelFactory(...deps);
+    CustomSidePanel.defaultProps = {
+      ...CustomSidePanel.defaultProps,
+      panels: [
+        ...CustomSidePanel.defaultProps.panels,
+        {
+          id: 'rocket',
+          label: 'Rocket',
+          iconComponent: RocketIcon
+        },
+        {
+          id: 'chart',
+          label: 'Chart',
+          iconComponent: ChartIcon
+        }
+      ]
+    };
+    return CustomSidePanel;
+  }
+
+  CustomSidePanelFactory.deps = SidePanelFactory.deps;
+
   let wrapper;
 
   const CustomSidePanel = appInjector
+    .provide(SidePanelFactory, CustomSidePanelFactory)
     .provide(CustomPanelsFactory, CustomSidePanelsFactory)
     .get(SidePanelFactory);
 
@@ -239,7 +251,7 @@ test('Components -> SidePanel -> render custom panel', t => {
   t.equal(wrapper.find(RocketIcon).length, 1, 'should render RocketIcon');
   t.equal(wrapper.find(ChartIcon).length, 1, 'should render RocketIcon');
 
-  // mount CustomSidePanel with 1 of the custom panel
+  // // mount CustomSidePanel with 1 of the custom panel
   const uiState = {...defaultProps.uiState, activeSidePanel: 'rocket'};
   t.doesNotThrow(() => {
     wrapper = mountWithTheme(