Remove the onChange useeffect and place it whenever the change happens itself

src/renderer/components/Experiment/Widgets/CustomEvaluationWidget.tsx

@@ -6,6 +6,7 @@ import {
   Select,
   Option,
 } from '@mui/joy';
+import { on } from 'node:events';
 
 type EvaluationField = {
   name: string;
@@ -14,7 +15,6 @@ type EvaluationField = {
 };
 
 
-
 const CustomEvaluationWidget = (props: WidgetProps<any>) => {
   const { id, value, onChange, disabled, readonly } = props;
 
@@ -57,18 +57,13 @@ const CustomEvaluationWidget = (props: WidgetProps<any>) => {
     }
   }, [value]);
 
-
-
-  // Propagate state changes upstream.
-  React.useEffect(() => {
-    onChange(evalMetrics);
-  }, [evalMetrics]);
-
   const handleAddField = () => {
-    setEvalMetrics([
+    const updatedMetrics = [
       ...evalMetrics,
       { name: '', expression: '', return_type: 'boolean' }
-    ]);
+    ];
+    setEvalMetrics(updatedMetrics);
+    onChange(updatedMetrics);
   };
 
   const handleFieldChange = (
@@ -80,11 +75,13 @@ const CustomEvaluationWidget = (props: WidgetProps<any>) => {
       i === index ? { ...evaluation, [field]: newValue } : evaluation
     );
     setEvalMetrics(updated);
+    onChange(updated);
   };
 
   const handleRemoveField = (index: number) => {
     const updated = evalMetrics.filter((_, i) => i !== index);
     setEvalMetrics(updated);
+    onChange(updated);
   };
 
   return (