diff --git a/sdk/react/src/lib/components/settings-context-pane.tsx b/sdk/react/src/lib/components/settings-context-pane.tsx
index b4ea115c..fec9516d 100644
--- a/sdk/react/src/lib/components/settings-context-pane.tsx
+++ b/sdk/react/src/lib/components/settings-context-pane.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	Button,
 	Checkbox,
@@ -162,12 +162,14 @@ const throttledSetFragment = throttle((fragment: any) => proxySetFragment(fragme
 export const SettingsContextPane = ({
 	fragment,
 	setFragment,
-	settings,
-	setSettings,
+	settings: externalSettings,
+	setSettings: setExternalSettings,
 	styleClasses,
 	customComponentsCollections
 }: any) => {
 	const selectedComponent = getSelectedComponent(fragment);
+	const [settings, setSettings] = useState(externalSettings || {} as any);
+
 	const updateContextPaneSettings = (s: any) => {
 		setSettings({
 			...settings,
@@ -196,6 +198,16 @@ export const SettingsContextPane = ({
 
 	proxySetFragment = setFragment;
 
+	useEffect(() => {
+		setSettings(externalSettings);
+	}, [externalSettings]);
+
+	useEffect(() => {
+		if (setExternalSettings) {
+			setExternalSettings(settings);
+		}
+	}, [settings]);
+
 	return (
 		<div className={cx(styleContextPaneStyle, 'context-pane-content')}>
 			{