diff --git a/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx b/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
index 2c3778c..c7ae6c7 100644
--- a/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
+++ b/packages/trpc-ui/src/react-app/components/form/fields/ArrayField.tsx
@@ -36,6 +36,8 @@ export function ArrayField({
   // the form state changes.
   const watch = useWatch({ control });
 
+  const arrayValue = "json" in field.value ? field.value.json : field.value;
+
   function getValueFromWatch() {
     let r = watch;
     for (const p of [ROOT_VALS_PROPERTY_NAME].concat(
@@ -48,13 +50,17 @@ export function ArrayField({
 
   function onAddClick() {
     setTextFieldKeys((old) => old.concat([`${currentKeyCount++}`]));
+    const watchValue = getValueFromWatch();
+    const arrayValue = "json" in watchValue ? watchValue.json : watchValue;
     field.onChange(
-      getValueFromWatch().concat([defaultFormValuesForNode(node.childType)]),
+      arrayValue.concat([defaultFormValuesForNode(node.childType)]),
     );
   }
 
   function onDeleteClick(index: number) {
-    const newArr = [...getValueFromWatch()];
+    const watchValue = getValueFromWatch();
+    const arrayValue = "json" in watchValue ? watchValue.json : watchValue;
+    const newArr = [...arrayValue];
     const newKeysArr = [...textFieldKeys];
     newArr.splice(index, 1);
     newKeysArr.splice(index, 1);
@@ -66,7 +72,7 @@ export function ArrayField({
       iconElement={<DataArray className="mr-1" />}
       title={label}
     >
-      {field.value.map((parsedNode: ParsedInputNode, i: number) => (
+      {arrayValue.map((parsedNode: ParsedInputNode, i: number) => (
         <span
           key={`${JSON.stringify(parsedNode)} ${i}`}
           className="flex flex-row items-start"