diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 870fd099fe1d7e332871f36e23aae99afb6815fc..46ea83a18d360bedaddbf7c74cdfc09b0a02cc3a 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -153,6 +153,7 @@ export class CanvasAnnotations extends Component {
                 selected={selectedAnnotationId === annotation.id}
               >
                 <MenuItem
+                  component={listContainerComponent}
                   variant="multiline"
                   divider
                   sx={{
@@ -161,6 +162,7 @@ export class CanvasAnnotations extends Component {
                     },
                     backgroundColor: hoveredAnnotationIds.includes(annotation.id) ? 'action.hover' : '',
                   }}
+                  ref={containerRef}
                   key={annotation.id}
                   annotationid={annotation.id}
                   selected={selectedAnnotationId === annotation.id}
diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js
index a83699fda188d03f8059087698ad9c253bff06ba..761d41e3ad2cefe7bb6ad2ace45b9ed416540f59 100644
--- a/src/components/WindowSideBarAnnotationsPanel.js
+++ b/src/components/WindowSideBarAnnotationsPanel.js
@@ -19,10 +19,7 @@ function WindowSideBarAnnotationsPanel({
 
   useEffect(() => {
     console.log(`Use effect ${containerRef}`);
-    console.log(`Use effect ${containerRef.current}`);
-    if(containerRef.current) {
-      containerRef.current.focus();
-    }
+    console.log(`Use effect current ${containerRef.current}`);
   });
 
   return (