diff --git a/frontend/src/Editor/QueryManager/Components/Transformation.jsx b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
index f8299dfd40..81e2eb9d5e 100644
--- a/frontend/src/Editor/QueryManager/Components/Transformation.jsx
+++ b/frontend/src/Editor/QueryManager/Components/Transformation.jsx
@@ -110,10 +110,8 @@ export const Transformation = ({ changeOption, options, darkMode, queryId }) =>
   }, [lang]);
 
   useEffect(() => {
-    if (options.enableTransformation) {
-      lang !== (options.transformationLanguage ?? 'javascript') && changeOption('transformationLanguage', lang);
-      setState({ ...state, [lang]: options.transformation ?? defaultValue[lang] });
-    }
+    lang !== (options.transformationLanguage ?? 'javascript') && changeOption('transformationLanguage', lang);
+    setState({ ...state, [lang]: options.transformation ?? state[lang] ?? defaultValue[lang] });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(options.transformation)]);
 
@@ -141,6 +139,10 @@ export const Transformation = ({ changeOption, options, darkMode, queryId }) =>
     changeOption('enableTransformation', newEnableTransformation);
   };
 
+  useEffect(() => {
+    setEnableTransformation(options.enableTransformation);
+  }, [options.enableTransformation]);
+
   return (
     <div className="field transformation-editor">
       <div className="align-items-center gap-2 d-flex" style={{ position: 'relative', height: '20px' }}>
@@ -178,7 +180,6 @@ export const Transformation = ({ changeOption, options, darkMode, queryId }) =>
       </div>
       <br />
       <div className={`d-flex copilot-codehinter-wrap ${!enableTransformation && 'read-only-codehinter'}`}>
-        {/* <div className="form-label"></div> */}
         <div className="col flex-grow-1">
           <div style={{ borderRadius: '6px', marginBottom: '20px', background: darkMode ? '#272822' : '#F8F9FA' }}>
             <div className="py-3 px-3 d-flex justify-content-between copilot-section-header">
@@ -228,7 +229,9 @@ export const Transformation = ({ changeOption, options, darkMode, queryId }) =>
               lineNumbers={true}
               height={400}
               className="query-hinter"
-              onChange={(value) => changeOption('transformation', value)}
+              onChange={(value) => {
+                changeOption('transformation', value);
+              }}
               componentName={`transformation`}
               cyLabel={'transformation-input'}
               callgpt={noop}