diff --git a/web/src/components/layout/AppSplitter/AppSplitter.tsx b/web/src/components/layout/AppSplitter/AppSplitter.tsx
index 208f79359..6cd856e09 100644
--- a/web/src/components/layout/AppSplitter/AppSplitter.tsx
+++ b/web/src/components/layout/AppSplitter/AppSplitter.tsx
@@ -178,11 +178,15 @@ export const AppSplitter = forwardRef<
       }
     );
 
+    const imperativeHandleMethods = useMemo(() => {
+      return () => ({
+        setSplitSizes,
+        animateWidth
+      });
+    }, [setSplitSizes, animateWidth]);
+
     // Add useImperativeHandle to expose the function
-    useImperativeHandle(ref, () => ({
-      setSplitSizes,
-      animateWidth
-    }));
+    useImperativeHandle(ref, imperativeHandleMethods);
 
     return (
       <div className="h-full w-full">