diff --git a/modules/react/src/deckgl.ts b/modules/react/src/deckgl.ts
index 527e96c50b6..f3fa38da935 100644
--- a/modules/react/src/deckgl.ts
+++ b/modules/react/src/deckgl.ts
@@ -170,11 +170,14 @@ function DeckGLWithRef<ViewsT extends ViewOrViews = null>(
       parent: containerRef.current,
       canvas: canvasRef.current,
       layers: jsxProps.layers,
-      views: jsxProps.views as ViewsT,
       onViewStateChange: handleViewStateChange,
       onInteractionStateChange: handleInteractionStateChange
     };
 
+    if (jsxProps.views) {
+      forwardProps.views = jsxProps.views;
+    }
+
     // The defaultValue for _customRender is null, which would overwrite the definition
     // of _customRender. Remove to avoid frequently redeclaring the method here.
     delete forwardProps._customRender;
diff --git a/modules/react/src/utils/extract-jsx-layers.ts b/modules/react/src/utils/extract-jsx-layers.ts
index 1433db3435a..581f297b71d 100644
--- a/modules/react/src/utils/extract-jsx-layers.ts
+++ b/modules/react/src/utils/extract-jsx-layers.ts
@@ -8,6 +8,7 @@ import {inheritsFrom} from './inherits-from';
 import {Layer, View} from '@deck.gl/core';
 import {isComponent} from './evaluate-children';
 import type {LayersList, Viewport} from '@deck.gl/core';
+import type {ViewOrViews} from '../deckgl';
 
 export type DeckGLRenderCallbackArgs = {
   /**
@@ -61,18 +62,18 @@ function wrapInView(node: React.ReactNode | DeckGLRenderCallback): React.ReactNo
 }
 
 // extracts any deck.gl layers masquerading as react elements from props.children
-export default function extractJSXLayers({
+export default function extractJSXLayers<ViewsT extends ViewOrViews>({
   children,
   layers = [],
-  views = null
+  views
 }: {
   children?: React.ReactNode | DeckGLRenderCallback;
   layers?: LayersList;
-  views?: View | View[] | null;
+  views?: ViewsT;
 }): {
   children: React.ReactNode[];
   layers: LayersList;
-  views: View | View[] | null;
+  views: ViewsT | undefined;
 } {
   const reactChildren: React.ReactNode[] = []; // extract real react elements (i.e. not deck.gl layers)
   const jsxLayers: LayersList = []; // extracted layer from react children, will add to deck.gl layer array
@@ -111,11 +112,11 @@ export default function extractJSXLayers({
     } else if (views) {
       jsxViews[views.id] = views;
     }
-    views = Object.values(jsxViews);
+    views = Object.values(jsxViews) as ViewsT;
   }
 
   // Avoid modifying layers array if no JSX layers were found
-  layers = jsxLayers.length > 0 ? [...jsxLayers, ...layers] : layers;
+  layers = jsxLayers.length > 0 ? [jsxLayers, layers] : layers;
 
   return {layers, children: reactChildren, views};
 }
diff --git a/test/modules/react/utils/extract-jsx-layers.spec.ts b/test/modules/react/utils/extract-jsx-layers.spec.ts
index c6b7472db09..c75e1a3f52f 100644
--- a/test/modules/react/utils/extract-jsx-layers.spec.ts
+++ b/test/modules/react/utils/extract-jsx-layers.spec.ts
@@ -34,14 +34,12 @@ const TEST_CASES = [
   },
   {
     input: {
-      children: null,
-      views: null,
-      layers: null
+      children: null
     },
     output: {
       children: [],
-      views: null,
-      layers: null
+      views: undefined,
+      layers: []
     },
     title: 'empty layers'
   },
@@ -145,7 +143,7 @@ const TEST_CASES = [
     output: {
       children: [],
       views: null,
-      layers: [lineLayer]
+      layers: [[lineLayer], []]
     },
     title: 'JSX layers'
   },
@@ -158,7 +156,7 @@ const TEST_CASES = [
     output: {
       children: [],
       views: null,
-      layers: [lineLayer, scatterplotLayer]
+      layers: [[lineLayer], [scatterplotLayer]]
     },
     title: 'JSX layers with layers prop'
   },
@@ -171,7 +169,7 @@ const TEST_CASES = [
     output: {
       children: [reactMapView, createElement(View, {}, noop)],
       views: [new MapView(reactMapView.props)],
-      layers: [lineLayer]
+      layers: [[lineLayer], []]
     },
     title: 'fragment with single child'
   },
@@ -184,7 +182,7 @@ const TEST_CASES = [
     output: {
       children: [reactMapView, createElement(View, {}, noop)],
       views: [new MapView(reactMapView.props)],
-      layers: [lineLayer]
+      layers: [[lineLayer], []]
     },
     title: 'fragment with statically known children'
   },
@@ -197,20 +195,18 @@ const TEST_CASES = [
     output: {
       children: [reactMapView, createElement(View, {}, noop)],
       views: [new MapView(reactMapView.props)],
-      layers: [lineLayer]
+      layers: [[lineLayer], []]
     },
     title: 'fragment with dynamic children'
   },
   {
     input: {
-      children: [reactMapView, reactLineLayer, noop],
-      views: null,
-      layers: []
+      children: [reactMapView, reactLineLayer, noop]
     },
     output: {
       children: [reactMapView, createElement(View, {}, noop)],
       views: [new MapView(reactMapView.props)],
-      layers: [lineLayer]
+      layers: [[lineLayer], []]
     },
     title: 'mixed children'
   }