diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 7d4cf386..0f6fa8bf 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -105,12 +105,12 @@ export const BrowserWindow = () => {
         };
     }, [socket, onMouseMove]);
 
-    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         if (highlighterData && canvasRef?.current) {
             const canvasRect = canvasRef.current.getBoundingClientRect();
             const clickX = e.clientX - canvasRect.left;
             const clickY = e.clientY - canvasRect.top;
-
+    
             const highlightRect = highlighterData.rect;
             if (
                 clickX >= highlightRect.left &&
@@ -134,11 +134,10 @@ export const BrowserWindow = () => {
                             attribute: 'innerText'
                         });
                     }
-                } 
-
+                }
+    
                 if (getList === true && !listSelector) {
                     setListSelector(highlighterData.selector);
-                    //console.log('added list selector', highlighterData.selector);
                 } else if (getList === true && listSelector) {
                     const options = getAttributeOptions(highlighterData.elementInfo?.tagName || '');
                     if (options.length > 1) {
@@ -149,10 +148,9 @@ export const BrowserWindow = () => {
                         });
                         setShowAttributeModal(true);
                     } else {
-                        // When setting fields, ensure it matches the TextStep structure
                         const newField: TextStep = {
                             id: Date.now(),
-                            type: 'text', // or another appropriate type
+                            type: 'text',
                             label: `label ${Object.keys(fields).length + 1}`,
                             data: highlighterData.elementInfo?.innerText || '',
                             selectorObj: {
@@ -161,38 +159,49 @@ export const BrowserWindow = () => {
                                 attribute: 'innerText'
                             }
                         };
-                        //console.log('added new field:', newField)
-
-                        setFields(prevFields => ({
-                            ...prevFields,
-                            [newField.id]: newField
-                        }));
-                        
-                            
-                            // if (Object.keys(updatedFields).length > 0 && listSelector) {
-                            //     console.log('listSelector before addListStep:', listSelector);
-                            //     console.log('fields before addListStep:', updatedFields);
     
-                            //     addListStep(listSelector, updatedFields);
-                            //     console.log('Called addListStep with:', { listSelector, updatedFields });
-                            // }
-                          
+                        // Use a callback to update the state after rendering
+                        setTimeout(() => {
+                            processFieldsUpdate(newField);
+                        }, 0);
                     }
-
                 }
             }
         }
+    }, [highlighterData, canvasRef, getText, getList, listSelector, fields, addTextStep, addListStep]);
+    
+    const processFieldsUpdate = (newField: TextStep) => {
+        setFields(prevFields => {
+            const updatedFields = {
+                ...prevFields,
+                [newField.id]: newField
+            };
+    
+            if (Object.keys(updatedFields).length > 0 && listSelector) {
+                addListStep(listSelector, updatedFields);
+                console.log('Called addListStep with:', { listSelector, updatedFields })
+                // Reset the state after adding the step
+                setListSelector(null);
+                setFields({});
+            }
+    
+            return updatedFields;
+        });
     };
 
 
     // useEffect(() => {
-    //     // Save the ListStep after the fields are set
-    //     if (Object.keys(fields).length > 0 && listSelector) {
-    //         addListStep(listSelector, fields);
-    //         // Reset after adding the step
-    //         setListSelector(null);
-    //         setFields({});
-    //     }
+    // //      Save the ListStep after the fields are set
+    //      if (Object.keys(fields).length > 0 && listSelector) {
+    //          console.log('listSelector before addListStep:', listSelector);
+    //          console.log('fields before addListStep:', fields)
+    //                         //     ;
+    //          addListStep(listSelector, fields);
+    //          console.log('Called addListStep with:', { listSelector, fields })
+    //          // Reset after adding the step
+    //           //setListSelector(null);
+    // //         setFields({});
+    //      }
     // }, [fields, listSelector, addListStep]);
 
     const handleAttributeSelection = (attribute: string) => {