diff --git a/packages/design-system/src/components/tree/tree-node.tsx b/packages/design-system/src/components/tree/tree-node.tsx
index c613770016..94f2df8913 100644
--- a/packages/design-system/src/components/tree/tree-node.tsx
+++ b/packages/design-system/src/components/tree/tree-node.tsx
@@ -207,7 +207,7 @@ const ItemContainer = styled(Flex, {
 });
 
 const useScrollIntoView = (
-  element: HTMLElement | null,
+  elementRef: { current: HTMLElement | null },
   {
     isDragging,
     isDropTarget,
@@ -218,8 +218,6 @@ const useScrollIntoView = (
   isDraggingRef.current = isDragging;
   const isDropTargetRef = useRef(isDropTarget);
   isDropTargetRef.current = isDropTarget;
-  const elementRef = useRef(element);
-  elementRef.current = element;
 
   // Scroll the selected button into view when selected from canvas.
   useEffect(() => {
@@ -233,7 +231,11 @@ const useScrollIntoView = (
         block: "nearest",
       });
     }
-  }, [isSelected]);
+  }, [
+    isSelected,
+    //only for the linter
+    elementRef,
+  ]);
 };
 
 export type TreeItemRenderProps<Data extends { id: string }> = {
@@ -317,7 +319,7 @@ export const TreeItemBody = <Data extends { id: string }>({
     itemSelector
   );
 
-  useScrollIntoView(itemButtonRef.current, {
+  useScrollIntoView(itemButtonRef, {
     isSelected,
     isDragging,
     isDropTarget,