diff --git a/nextjs/src/components/admin/ImageUploadSlot.tsx b/nextjs/src/components/admin/ImageUploadSlot.tsx
index 9a3491f..a31dbca 100644
--- a/nextjs/src/components/admin/ImageUploadSlot.tsx
+++ b/nextjs/src/components/admin/ImageUploadSlot.tsx
@@ -20,7 +20,7 @@ function extractMediaId(value: unknown): string | number | null {
 
 export function ImageUploadSlot({ displayName }: Props) {
   const { rows } = useField<unknown>({ path: 'images', hasRows: true })
-  const { dispatchFields, getDataByPath } = useForm()
+  const { addFieldRow, removeFieldRow, getDataByPath } = useForm()
   const fileInput = useRef<HTMLInputElement | null>(null)
   const [uploading, setUploading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -78,8 +78,7 @@ export function ImageUploadSlot({ displayName }: Props) {
 
   const appendRow = useCallback(
     (mediaId: number | string) => {
-      dispatchFields({
-        type: 'ADD_ROW',
+      addFieldRow({
         path: 'images',
         rowIndex: rowCount,
         subFieldState: {
@@ -87,18 +86,17 @@ export function ImageUploadSlot({ displayName }: Props) {
         },
       })
     },
-    [dispatchFields, rowCount],
+    [addFieldRow, rowCount],
   )
 
   const removeRow = useCallback(
     (rowIndex: number) => {
-      dispatchFields({
-        type: 'REMOVE_ROW',
+      removeFieldRow({
         path: 'images',
         rowIndex,
       })
     },
-    [dispatchFields],
+    [removeFieldRow],
   )
 
   const onFile = async (e: React.ChangeEvent<HTMLInputElement>) => {