diff --git a/src/components/TextField.tsx b/src/components/TextField.tsx
index 58de55d..1fe8b06 100644
--- a/src/components/TextField.tsx
+++ b/src/components/TextField.tsx
@@ -1,4 +1,4 @@
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import styles from "./TextField.module.css";
 
 /**
@@ -86,6 +86,11 @@ export function TextField({
 }) {
   const [inputValue, setInputValue] = useState(value);
 
+  // The value may be changed from the outside, for example, when a program is loaded. We need to update the input value accordingly.
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
   const onCommit = () => setValue(inputValue);
 
   return <RealtimeTextField