Reactively cascade form field update event

src/components/group/obs-group.component.tsx

@@ -16,7 +16,7 @@ export const ObsGroup: React.FC<FormFieldInputProps> = ({ field }) => {
         return (
           <div className={classNames(styles.flexColumn)} key={keyId}>
             <div className={styles.groupContainer}>
-              <FormFieldRenderer field={child} valueAdapter={formFieldAdapters[child.type]} />
+              <FormFieldRenderer fieldId={child.id} valueAdapter={formFieldAdapters[child.type]} />
             </div>
           </div>
         );

src/components/inputs/select/dropdown.component.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown as DropdownInput, Layer } from '@carbon/react';
 import { shouldUseInlineLayout } from '../../../utils/form-helper';

src/components/renderer/field/form-field-renderer.component.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   type FormField,
   type RenderType,
@@ -24,14 +24,14 @@ import { getFieldControlWithFallback } from '../../../utils/form-helper';
 import { handleFieldLogic } from './fieldLogic';
 
 export interface FormFieldRendererProps {
-  field: FormField;
+  fieldId: string;
   valueAdapter: FormFieldValueAdapter;
   repeatOptions?: {
     targetRendering: RenderType;
   };
 }
 
-export const FormFieldRenderer = ({ field, valueAdapter, repeatOptions }: FormFieldRendererProps) => {
+export const FormFieldRenderer = ({ fieldId, valueAdapter, repeatOptions }: FormFieldRendererProps) => {
   const [inputComponentWrapper, setInputComponentWrapper] = useState<{
     value: React.ComponentType<FormFieldInputProps>;
   }>(null);
@@ -50,9 +50,11 @@ export const FormFieldRenderer = ({ field, valueAdapter, repeatOptions }: FormFi
     removeInvalidField,
   } = context;
 
-  const fieldValue = useWatch({ control, name: field.id, exact: true });
+  const fieldValue = useWatch({ control, name: fieldId, exact: true });
   const noop = () => {};
 
+  const field = useMemo(() => formFields.find((field) => field.id === fieldId), [fieldId, formFields]);
+
   useEffect(() => {
     if (hasRendering(field, 'repeating') && repeatOptions?.targetRendering) {
       getRegisteredControl(repeatOptions.targetRendering).then((component) => {

src/components/renderer/section/section-renderer.component.tsx

@@ -12,7 +12,11 @@ export const SectionRenderer = ({ section }: { section: FormSection }) => {
       {section.questions.map((question) =>
         formFieldAdapters[question.type] ? (
           <div key={`${sectionId}-${question.id}`} className={styles.sectionBody}>
-            <FormFieldRenderer key={question.id} field={question} valueAdapter={formFieldAdapters[question.type]} />
+            <FormFieldRenderer
+              key={question.id}
+              fieldId={question.id}
+              valueAdapter={formFieldAdapters[question.type]}
+            />
           </div>
         ) : null,
       )}

src/components/repeat/repeat.component.tsx

@@ -129,7 +129,7 @@ const Repeat: React.FC<FormFieldInputProps> = ({ field }) => {
     return rows.map((field, index) => {
       const component = (
         <FormFieldRenderer
-          field={field}
+          fieldId={field.id}
           valueAdapter={formFieldAdapters[field.type]}
           repeatOptions={{ targetRendering: getQuestionWithSupportedRendering(field).questionOptions.rendering }}
         />

src/hooks/useFormStateHelpers.ts

@@ -7,7 +7,7 @@ export function useFormStateHelpers(dispatch: Dispatch<Action>, formFields: Form
     dispatch({ type: 'ADD_FORM_FIELD', value: field });
   }, []);
   const updateFormField = useCallback((field: FormField) => {
-    dispatch({ type: 'UPDATE_FORM_FIELD', value: field });
+    dispatch({ type: 'UPDATE_FORM_FIELD', value: structuredClone(field) });
   }, []);
 
   const getFormField = useCallback(