diff --git a/src/frontend/src/components/forms/fields/ApiFormField.tsx b/src/frontend/src/components/forms/fields/ApiFormField.tsx
index 85e128a1fd..d9adc749f3 100644
--- a/src/frontend/src/components/forms/fields/ApiFormField.tsx
+++ b/src/frontend/src/components/forms/fields/ApiFormField.tsx
@@ -247,7 +247,9 @@ export function ApiFormField({
);
case 'tags':
diff --git a/src/frontend/src/components/forms/fields/TableField.tsx b/src/frontend/src/components/forms/fields/TableField.tsx
index 3e41a9f5c1..fb626a3992 100644
--- a/src/frontend/src/components/forms/fields/TableField.tsx
+++ b/src/frontend/src/components/forms/fields/TableField.tsx
@@ -2,8 +2,14 @@ import { t } from '@lingui/core/macro';
import { Trans } from '@lingui/react/macro';
import { Alert, Container, Group, Stack, Table, Text } from '@mantine/core';
import { IconExclamationCircle } from '@tabler/icons-react';
-import { type ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
-import type { FieldValues, UseControllerReturn } from 'react-hook-form';
+import {
+ type ReactNode,
+ memo,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef
+} from 'react';
import { AddItemButton } from '@lib/components/AddItemButton';
import { identifierString } from '@lib/functions/Conversion';
@@ -84,23 +90,21 @@ export function TableFieldErrorWrapper({
);
}
-export function TableField({
+function TableFieldComponent({
definition,
fieldName,
- control
+ value,
+ onChange,
+ error
}: Readonly<{
definition: ApiFormFieldType;
fieldName: string;
- control: UseControllerReturn;
+ value: any;
+ onChange: (value: any) => void;
+ error?: any;
}>) {
- const {
- field,
- fieldState: { error }
- } = control;
- const { value } = field;
-
const valueRef = useRef(value);
- const onChangeRef = useRef(field.onChange);
+ const onChangeRef = useRef(onChange);
const rowIndexByIdRef = useRef(new Map());
const generatedRowIdsRef = useRef(new WeakMap