From c995f797fec76e78eafb323cdf4219caebdfa6c7 Mon Sep 17 00:00:00 2001
From: James <james@trbl.design>
Date: Fri, 15 Jul 2022 17:20:32 -0700
Subject: [PATCH] feat: initializes useField internalValue with incoming field
 value

---
 src/admin/components/forms/useField/index.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/admin/components/forms/useField/index.tsx b/src/admin/components/forms/useField/index.tsx
index 3fb4a76dc1..1cf55e811a 100644
--- a/src/admin/components/forms/useField/index.tsx
+++ b/src/admin/components/forms/useField/index.tsx
@@ -33,17 +33,17 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
     setModified,
   } = formContext || {};
 
-  const [internalValue, setInternalValue] = useState(undefined);
-  const [internallyValid, setInternallyValid] = useState<boolean>(undefined);
-
-  // Debounce internal values to update form state only every 60ms
-  const debouncedValue = useDebounce(internalValue, 120);
-
   // Get field by path
   const field = getField(path);
 
   const initialValue = field?.initialValue as T;
 
+  const [internalValue, setInternalValue] = useState(field?.value as T);
+  const [internallyValid, setInternallyValid] = useState<boolean>(undefined);
+
+  // Debounce internal values to update form state only every 60ms
+  const debouncedValue = useDebounce(internalValue, 120);
+
   // Validation is defined by two ways -
   // 1. by field state
   // 2. maintained locally to reflect instant validation state changes
@@ -128,7 +128,6 @@ const useField = <T extends unknown>(options: Options): FieldType<T> => {
   ]);
 
   useEffect(() => {
-    setInternalValue(initialValue);
     setInternallyValid(undefined);
   }, [initialValue]);