diff --git a/packages/client/src/components/common/business-trip-report/parts/attendee-stay-input.tsx b/packages/client/src/components/common/business-trip-report/parts/attendee-stay-input.tsx
index 811080d089..17fa19295b 100644
--- a/packages/client/src/components/common/business-trip-report/parts/attendee-stay-input.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/attendee-stay-input.tsx
@@ -2,9 +2,7 @@ import { useEffect, useState, type ReactElement } from 'react';
 import { ListPlus, Trash2 } from 'lucide-react';
 import {
   Controller,
-  useFieldArray,
   type ArrayPath,
-  type FieldArray,
   type FieldValues,
   type Path,
   type UseFormReturn,
@@ -12,6 +10,10 @@ import {
 import { useQuery } from 'urql';
 import { NumberInput, Select } from '@mantine/core';
 import { AttendeesByBusinessTripDocument } from '../../../../gql/graphql.js';
+import {
+  useControlledFieldArray,
+  type FieldArrayItem,
+} from '../../../../hooks/use-controlled-field-array.js';
 import { Button } from '../../../ui/button.js';
 
 type Props<T extends FieldValues> = {
@@ -32,22 +34,14 @@ export function AttendeesStayInput<T extends FieldValues>({
   fetchingAttendees = false,
   businessTripId,
 }: Props<T>): ReactElement {
-  const { control, watch, trigger } = formManager;
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: attendeesStayPath,
-  });
+  const { control, trigger } = formManager;
+  const { controlledFields, append, remove } = useControlledFieldArray(
+    formManager,
+    attendeesStayPath,
+  );
   const [fetching, setFetching] = useState(fetchingAttendees);
   const [attendees, setAttendees] = useState(attendeesData ?? []);
 
-  const watchFieldArray = watch(attendeesStayPath as Path<T>);
-  const controlledFields = fields.map((field, index) => {
-    return {
-      ...field,
-      ...watchFieldArray[index],
-    };
-  });
-
   useEffect(() => {
     if (attendeesData) {
       setAttendees(attendeesData);
@@ -169,7 +163,7 @@ export function AttendeesStayInput<T extends FieldValues>({
           size="icon"
           className="size-7.5"
           onClick={(): void => {
-            append({} as FieldArray<T, ArrayPath<T>>);
+            append({} as FieldArrayItem<T>);
             trigger(attendeesStayPath as Path<T>);
           }}
         >
diff --git a/packages/client/src/components/common/business-trip-report/parts/flight-path-input.tsx b/packages/client/src/components/common/business-trip-report/parts/flight-path-input.tsx
index 50328d92d0..143cfa87c9 100644
--- a/packages/client/src/components/common/business-trip-report/parts/flight-path-input.tsx
+++ b/packages/client/src/components/common/business-trip-report/parts/flight-path-input.tsx
@@ -1,13 +1,10 @@
 import type { ReactElement } from 'react';
 import { ListPlus, Trash2 } from 'lucide-react';
+import { type ArrayPath, type FieldValues, type Path, type UseFormReturn } from 'react-hook-form';
 import {
-  useFieldArray,
-  type ArrayPath,
-  type FieldArray,
-  type FieldValues,
-  type Path,
-  type UseFormReturn,
-} from 'react-hook-form';
+  useControlledFieldArray,
+  type FieldArrayItem,
+} from '../../../../hooks/use-controlled-field-array.js';
 import { Button } from '../../../ui/button.js';
 import { FormControl, FormField, FormItem, FormMessage } from '../../../ui/form';
 import { Input } from '../../../ui/input';
@@ -24,19 +21,11 @@ export function FlightPathInput<T extends FieldValues>({
   flightPathPath,
   flightPathData,
 }: Props<T>): ReactElement {
-  const { control, watch, trigger } = formManager;
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: flightPathPath as ArrayPath<T>,
-  });
-
-  const watchFieldArray = watch(flightPathPath);
-  const controlledFields = fields.map((field, index) => {
-    return {
-      ...field,
-      ...watchFieldArray[index],
-    };
-  });
+  const { control, trigger } = formManager;
+  const { controlledFields, append, remove } = useControlledFieldArray(
+    formManager,
+    flightPathPath as ArrayPath<T>,
+  );
 
   if (!flightPathData) {
     return <div>Cannot edit flight path stay, lacking some mandatory information!</div>;
@@ -87,7 +76,7 @@ export function FlightPathInput<T extends FieldValues>({
           size="icon"
           className="size-7.5"
           onClick={(): void => {
-            append('' as FieldArray<T, ArrayPath<T>>);
+            append('' as FieldArrayItem<T>);
             trigger(flightPathPath);
           }}
         >
diff --git a/packages/client/src/components/common/inputs/charge-spread-input.tsx b/packages/client/src/components/common/inputs/charge-spread-input.tsx
index fbc4a5bdcc..391756ca4b 100644
--- a/packages/client/src/components/common/inputs/charge-spread-input.tsx
+++ b/packages/client/src/components/common/inputs/charge-spread-input.tsx
@@ -3,15 +3,17 @@ import { format } from 'date-fns';
 import { ListPlus, Trash2 } from 'lucide-react';
 import {
   Controller,
-  useFieldArray,
   type ArrayPath,
-  type FieldArray,
   type FieldValues,
   type Path,
   type UseFormReturn,
 } from 'react-hook-form';
 import { NumberInput } from '@mantine/core';
 import { YearPickerInput } from '@mantine/dates';
+import {
+  useControlledFieldArray,
+  type FieldArrayItem,
+} from '../../../hooks/use-controlled-field-array.js';
 import { Button } from '../../ui/button.js';
 
 type Props<T extends FieldValues> = {
@@ -23,19 +25,11 @@ export function ChargeSpreadInput<T extends FieldValues>({
   formManager,
   chargeSpreadPath,
 }: Props<T>): ReactElement {
-  const { control, watch, trigger } = formManager;
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: chargeSpreadPath,
-  });
-
-  const watchFieldArray = watch(chargeSpreadPath as Path<T>);
-  const controlledFields = fields.map((field, index) => {
-    return {
-      ...field,
-      ...watchFieldArray[index],
-    };
-  });
+  const { control, trigger } = formManager;
+  const { controlledFields, append, remove, watchFieldArray } = useControlledFieldArray(
+    formManager,
+    chargeSpreadPath,
+  );
 
   return (
     <div>
@@ -50,14 +44,13 @@ export function ChargeSpreadInput<T extends FieldValues>({
                 rules={{
                   required: 'Required',
                   validate: (value: string): boolean | string => {
-                    const years = watchFieldArray.map((record: { year: string }) => record.year);
-                    if (years.filter((year: string) => year === value).length > 1) {
+                    const years = watchFieldArray.map(record => (record as { year?: string }).year);
+                    if (years.filter(year => year === value).length > 1) {
                       return 'Years must be unique';
                     }
                     return true;
                   },
                 }}
-                // defaultValue={`${new Date().getFullYear()}-01-01` as PathValue<T, Path<T>>}
                 render={({ field: { value, ...field }, fieldState }): ReactElement => {
                   return (
                     <YearPickerInput
@@ -116,7 +109,7 @@ export function ChargeSpreadInput<T extends FieldValues>({
           size="icon"
           className="size-7.5"
           onClick={(): void => {
-            append({ year: `${new Date().getFullYear()}-01-01` } as FieldArray<T, ArrayPath<T>>);
+            append({ year: `${new Date().getFullYear()}-01-01` } as FieldArrayItem<T>);
             trigger(chargeSpreadPath as Path<T>);
           }}
         >
diff --git a/packages/client/src/components/common/inputs/string-array-input.tsx b/packages/client/src/components/common/inputs/string-array-input.tsx
index 53550dbef1..f8d2f7443d 100644
--- a/packages/client/src/components/common/inputs/string-array-input.tsx
+++ b/packages/client/src/components/common/inputs/string-array-input.tsx
@@ -1,13 +1,10 @@
 import type { ReactElement } from 'react';
 import { ListPlus, Trash2 } from 'lucide-react';
+import { type ArrayPath, type FieldValues, type Path, type UseFormReturn } from 'react-hook-form';
 import {
-  useFieldArray,
-  type ArrayPath,
-  type FieldArray,
-  type FieldValues,
-  type Path,
-  type UseFormReturn,
-} from 'react-hook-form';
+  useControlledFieldArray,
+  type FieldArrayItem,
+} from '../../../hooks/use-controlled-field-array.js';
 import { Button } from '../../ui/button.js';
 import { FormControl, FormField, FormItem, FormMessage } from '../../ui/form.js';
 import { Input } from '../../ui/input.js';
@@ -23,19 +20,11 @@ export function StringArrayInput<T extends FieldValues>({
   formManager,
   arrayPath,
 }: Props<T>): ReactElement {
-  const { control, watch } = formManager;
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: arrayPath as ArrayPath<T>,
-  });
-
-  const watchStringsArray = watch(arrayPath);
-  const controlledFields = fields.map((field, index) => {
-    return {
-      id: field.id,
-      ...watchStringsArray[index],
-    };
-  });
+  const { control } = formManager;
+  const { controlledFields, append, remove } = useControlledFieldArray(
+    formManager,
+    arrayPath as ArrayPath<T>,
+  );
 
   return (
     <div>
@@ -82,7 +71,7 @@ export function StringArrayInput<T extends FieldValues>({
           variant="ghost"
           size="icon"
           className="size-7.5"
-          onClick={() => append(undefined as FieldArray<T>)}
+          onClick={() => append(undefined as FieldArrayItem<T>)}
         >
           <ListPlus className="size-5" />
         </Button>
diff --git a/packages/client/src/hooks/use-controlled-field-array.ts b/packages/client/src/hooks/use-controlled-field-array.ts
new file mode 100644
index 0000000000..3462f6198f
--- /dev/null
+++ b/packages/client/src/hooks/use-controlled-field-array.ts
@@ -0,0 +1,58 @@
+import {
+  useFieldArray,
+  type ArrayPath,
+  type FieldArrayPathValue,
+  type FieldValues,
+  type Path,
+  type UseFieldArrayReturn,
+  type UseFormReturn,
+} from 'react-hook-form';
+
+/**
+ * Item type of the field array at the given path. Reconstruction of react-hook-form's
+ * `FieldArray` type, which is shadowed since v7.82 by the new `FieldArray` component
+ * and can no longer be imported from the package root.
+ */
+export type FieldArrayItem<
+  TFieldValues extends FieldValues,
+  TPath extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>,
+> =
+  FieldArrayPathValue<TFieldValues, TPath> extends ReadonlyArray<infer TItem> | null | undefined
+    ? TItem
+    : never;
+
+type UseControlledFieldArrayReturn<
+  TFieldValues extends FieldValues,
+  TPath extends ArrayPath<TFieldValues>,
+> = Pick<UseFieldArrayReturn<TFieldValues, TPath>, 'append' | 'remove'> & {
+  controlledFields: UseFieldArrayReturn<TFieldValues, TPath>['fields'];
+  watchFieldArray: FieldArrayItem<TFieldValues, TPath>[];
+};
+
+/**
+ * Wraps `useFieldArray` and merges the registered fields with the watched values,
+ * so consumers render always-current values while keeping stable field ids as keys.
+ */
+export function useControlledFieldArray<
+  TFieldValues extends FieldValues,
+  TPath extends ArrayPath<TFieldValues> = ArrayPath<TFieldValues>,
+>(
+  formManager: UseFormReturn<TFieldValues, unknown>,
+  arrayPath: TPath,
+): UseControlledFieldArrayReturn<TFieldValues, TPath> {
+  const { control, watch } = formManager;
+  const { fields, append, remove } = useFieldArray({ control, name: arrayPath });
+
+  const watchFieldArray = (watch(arrayPath as unknown as Path<TFieldValues>) ??
+    []) as FieldArrayItem<TFieldValues, TPath>[];
+
+  const controlledFields = fields.map((field, index) => {
+    const watchedValue = watchFieldArray[index];
+    return {
+      ...field,
+      ...(typeof watchedValue === 'object' && watchedValue !== null ? watchedValue : {}),
+    };
+  });
+
+  return { controlledFields, append, remove, watchFieldArray };
+}