Form field array losing data when adding new rows in another field array

Description: I have a form with two separate useFieldArray sections (System Users and Board Members). When I add a new row to one field array after entering data in the other, the previously entered data disappears temporarily. The data reappears when I add a new row back to the original field array.

Problem:

Add a new System User row and enter data

Then add a new Board Member row → System User data disappears

Add another System User row → Original System User data reappears with a new empty row

Expected Behavior: Data in one field array should persist independently when modifying the other field array.

Code:

CompanyForm.tsx (relevant parts):

const {
  fields: systemUsers,
  append: appendSystemUser,
  remove: removeSystemUser,
} = useFieldArray({
  control: form.control,
  name: "systemUsers",
});

const { fields, append } = useFieldArray({
  control: form.control,
  name: "boardMembers",
});

// System Users table section
<SystemUsersTable
  data={systemUsers}
  isEditing={isEditing}
  onRemove={removeSystemUser}
  onFieldChange={(index, field, value) => {
    form.setValue(`systemUsers.${index}.${field}`, value);
  }}
/>

// Board Members section
{isEditing && (
  <span
    onClick={() => append({ designation: "Mr", name: "" })}
  >
    + Add
  </span>
)}

SystemUsersTable.tsx:

export const SystemUsersTable = ({
  data,
  isEditing,
  onRemove,
  onFieldChange,
}: SystemUsersTableProps) => {
  const columns = [
    {
      accessorKey: "name",
      header: "Employee Name",
      cell: (props) => (
        <EditableTextCell
          {...props}
          disabled={!isEditing}
        />
      ),
    },
    // ... other columns
  ];

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    meta: {
      updateData: (rowIndex, columnId, value) => {
        onFieldChange(rowIndex, columnId, value);
      },
      isEditing,
      onRemove,
    },
  });
  // ... render table
};

EditableTextCell.tsx:

export const EditableTextCell = ({
  getValue,
  row: { index },
  column: { id },
  table,
  disabled = false,
}: CellContext<T, string> & { disabled?: boolean }) => {
  const initialValue = getValue();
  const [value, setValue] = useState(initialValue);

  useEffect(() => {
    setValue(initialValue);
  }, [initialValue]);

  const handleBlur = () => {
    table.options.meta?.updateData(index, id, value);
  };

  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onBlur={handleBlur}
      disabled={disabled}
    />
  );
};

Question: Why does modifying one field array cause another field array to temporarily lose its data, and how can I prevent this behavior?