diff --git a/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx b/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx
index 6df105f24ff99..6f74d8d3a9b14 100644
--- a/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx
+++ b/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx
@@ -21,27 +21,31 @@ import React from 'react';
 import { EuiButton } from '@elastic/eui';
 import { JsonEditor } from '../../../../src/plugins/es_ui_shared/public';
 
-export const InputEditor = <T extends object>(props: {
-  input: T;
-  onSubmit: (value: T) => void;
-}) => {
-  const getJsonData = React.useRef(() => props.input);
-  const [isValid, setIsValid] = React.useState(true);
-
+export const InputEditor = <T,>(props: { input: T; onSubmit: (value: T) => void }) => {
+  const input = JSON.stringify(props.input, null, 4);
+  const [value, setValue] = React.useState(input);
+  const isValid = (() => {
+    try {
+      JSON.parse(value);
+      return true;
+    } catch (e) {
+      return false;
+    }
+  })();
+  React.useEffect(() => {
+    setValue(input);
+  }, [input]);
   return (
     <>
-      <JsonEditor<T>
-        defaultValue={props.input}
-        onUpdate={(jsonState) => {
-          getJsonData.current = jsonState.data.format;
-          setIsValid(jsonState.isValid);
-        }}
+      <JsonEditor
+        value={value}
+        onUpdate={(v) => setValue(v.data.raw)}
         euiCodeEditorProps={{
           'data-test-subj': 'dashboardEmbeddableByValueInputEditor',
         }}
       />
       <EuiButton
-        onClick={() => props.onSubmit(getJsonData.current())}
+        onClick={() => props.onSubmit(JSON.parse(value))}
         disabled={!isValid}
         data-test-subj={'dashboardEmbeddableByValueInputSubmit'}
       >