diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index 85e7d293d..fdf0f5bb1 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -4,7 +4,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import JsonView from "react18-json-view";
 import "react18-json-view/src/dark.css";
 import "react18-json-view/src/style.css";
@@ -21,6 +21,10 @@ export default function DictAreaModal({
   const [open, setOpen] = useState(false);
   const [dictObj, setDictObj] = useState(value);
 
+  useEffect(() => {
+    if (value) setDictObj(value);
+  }, [value]);
+
   return (
     <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
       <BaseModal.Trigger>{children}</BaseModal.Trigger>