diff --git a/lib/ui/src/components/sidebar/useExpanded.ts b/lib/ui/src/components/sidebar/useExpanded.ts
index fcf807dcd92..1741d722788 100644
--- a/lib/ui/src/components/sidebar/useExpanded.ts
+++ b/lib/ui/src/components/sidebar/useExpanded.ts
@@ -81,8 +81,7 @@ export const useExpanded = ({
   );
 
   const getElementByDataItemId = useCallback(
-    (id: string) =>
-      containerRef.current && containerRef.current.querySelector(`[data-item-id="${id}"]`),
+    (id: string) => containerRef.current?.querySelector(`[data-item-id="${id}"]`),
     [containerRef]
   );
 
@@ -98,7 +97,7 @@ export const useExpanded = ({
     ({ ids, value }) => {
       setExpanded({ ids, value });
       if (ids.length === 1) {
-        const element = containerRef.current.querySelector(
+        const element = containerRef.current?.querySelector(
           `[data-item-id="${ids[0]}"][data-ref-id="${refId}"]`
         );
         if (element) highlightElement(element);
diff --git a/lib/ui/src/components/sidebar/useHighlighted.ts b/lib/ui/src/components/sidebar/useHighlighted.ts
index 1da2e5281d1..c4db37eaf0d 100644
--- a/lib/ui/src/components/sidebar/useHighlighted.ts
+++ b/lib/ui/src/components/sidebar/useHighlighted.ts
@@ -67,12 +67,12 @@ export const useHighlighted = ({
       const { itemId, refId } = highlight;
       setTimeout(() => {
         scrollIntoView(
-          containerRef.current.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
+          containerRef.current?.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
           true // make sure it's clearly visible by centering it
         );
       }, 0);
     }
-  }, [dataset, highlightedRef, selected]);
+  }, [dataset, highlightedRef, containerRef, selected]);
 
   // Highlight nodes up/down the tree using arrow keys
   useEffect(() => {