diff --git a/frontend/src/Editor/Components/Modal.jsx b/frontend/src/Editor/Components/Modal.jsx
index 877fcccbae..8bb4ed6c40 100644
--- a/frontend/src/Editor/Components/Modal.jsx
+++ b/frontend/src/Editor/Components/Modal.jsx
@@ -4,53 +4,55 @@ import Button from 'react-bootstrap/Button';
 import { SubCustomDragLayer } from '../SubCustomDragLayer';
 import { SubContainer } from '../SubContainer';
 import { ConfigHandle } from '../ConfigHandle';
-import { resolveWidgetFieldValue } from '@/_helpers/utils';
 
-export const Modal = function Modal({ id, component, height, containerProps, currentState, darkMode }) {
-  const [show, showModal] = useState(false);
+export const Modal = function Modal({
+  id,
+  component,
+  height,
+  containerProps,
+  darkMode,
+  properties,
+  styles,
+  exposedVariables,
+  setExposedVariable,
+}) {
+  const [showModal, setShowModal] = useState(false);
   const parentRef = useRef(null);
 
-  const titleProp = component.definition.properties.title;
-  const title = titleProp ? titleProp.value : '';
+  const title = properties.title ?? '';
+  const size = properties.size ?? 'lg';
 
-  const sizeProp = component.definition.properties.size;
-  const size = sizeProp ? sizeProp.value : 'lg';
-
-  const disabledState = component.definition.styles?.disabledState?.value ?? false;
-
-  const parsedDisabledState =
-    typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
+  const { disabledState } = styles;
 
   useEffect(() => {
-    const componentState = containerProps.currentState.components[component.name];
-    const canShowModel = componentState ? componentState.show : false;
-    showModal(canShowModel);
+    const canShowModal = exposedVariables.show ?? false;
+    setShowModal(canShowModal);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [containerProps.currentState.components[component.name]]);
+  }, [exposedVariables.show]);
 
   function hideModal() {
-    containerProps.onComponentOptionChanged(component, 'show', false);
-    showModal(false);
+    setExposedVariable('show', false);
+    setShowModal(false);
   }
 
   return (
-    <div data-disabled={parsedDisabledState}>
+    <div data-disabled={disabledState}>
       <BootstrapModal
         contentClassName="modal-component"
-        show={show}
+        show={showModal}
         container={document.getElementsByClassName('canvas-area')[0]}
         size={size}
         backdrop={true}
         keyboard={true}
         enforceFocus={false}
         animation={false}
-        onEscapeKeyDown={() => showModal(false)}
+        onEscapeKeyDown={() => setShowModal(false)}
       >
         {containerProps.mode === 'edit' && (
           <ConfigHandle id={id} component={component} configHandleClicked={containerProps.onComponentClick} />
         )}
         <BootstrapModal.Header>
-          <BootstrapModal.Title>{resolveWidgetFieldValue(title, currentState)}</BootstrapModal.Title>
+          <BootstrapModal.Title>{title}</BootstrapModal.Title>
           <div>
             <Button variant={darkMode ? 'secondary' : 'light'} size="sm" onClick={hideModal}>
               x