diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 83a6a1dd2214a5e0ec33735b80dacecb464b318f..870fd099fe1d7e332871f36e23aae99afb6815fc 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -110,6 +110,10 @@ export class CanvasAnnotations extends Component {
 
     console.log('CanvasAnnotations containerRef : ', containerRef);
 
+    if (!containerRef.current) {
+      return <div>containerRef is null</div>;
+    }
+
     return (
       <>
         <Typography sx={{ paddingLeft: 2, paddingRight: 1, paddingTop: 2 }} variant="overline">
@@ -145,11 +149,10 @@ export class CanvasAnnotations extends Component {
                 containerRef={containerRef}
                 key={`${annotation.id}-scroll`}
                 offsetTop={96} // offset for the height of the form above
-                scrollTo={autoScroll ? (selectedAnnotationId === annotation.id) : false}
+                scrollTo={selectedAnnotationId === annotation.id}
                 selected={selectedAnnotationId === annotation.id}
               >
                 <MenuItem
-                  component={listContainerComponent}
                   variant="multiline"
                   divider
                   sx={{
diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js
index e1def5a7b87b9283121bacf3e8a85e04da4e6b2f..3ac8cbf8bad9fca2883b9cc8385e41ce8ddbbe82 100644
--- a/src/components/MiradorMenuButton.js
+++ b/src/components/MiradorMenuButton.js
@@ -1,3 +1,4 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Badge from '@mui/material/Badge';
diff --git a/src/components/ScrollTo.js b/src/components/ScrollTo.js
index f073642cf3ee297d6b306076ee3dc35d1510437b..cb5856953af199d1f9f9d88514cbfe893b5a1ee1 100644
--- a/src/components/ScrollTo.js
+++ b/src/components/ScrollTo.js
@@ -18,8 +18,6 @@ export class ScrollTo extends Component {
     const { scrollTo, containerRef } = this.props;
     if (!scrollTo) return;
 
-    console.log('Did mount Scroll to containerRef : ', containerRef);
-
     this.scrollToElement();
   }
 
@@ -38,7 +36,6 @@ export class ScrollTo extends Component {
   */
   containerBoundingRect() {
     const { containerRef } = this.props;
-    console.log('DcontainerBoundingRect Scroll to containerRef : ', containerRef);
 
     if (!containerRef || !containerRef.current) return {};
 
@@ -68,7 +65,6 @@ export class ScrollTo extends Component {
   */
   scrollableContainer() {
     const { containerRef } = this.props;
-    console.log('scrollableContainer Scroll to containerRef : ', containerRef);
     if (!containerRef || !containerRef.current) return null;
     return containerRef.current.getElementsByClassName('mirador-scrollto-scrollable')[0];
   }
diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js
index d2e6f781d0c3b160395df19809fa5f2ea39dc846..a83699fda188d03f8059087698ad9c253bff06ba 100644
--- a/src/components/WindowSideBarAnnotationsPanel.js
+++ b/src/components/WindowSideBarAnnotationsPanel.js
@@ -1,4 +1,4 @@
-import { createRef, Component } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@mui/material/Typography';
 import AnnotationSettings from '../containers/AnnotationSettings';
@@ -10,47 +10,48 @@ import ns from '../config/css-ns';
 /**
  * WindowSideBarAnnotationsPanel ~
 */
-export class WindowSideBarAnnotationsPanel extends Component {
+function WindowSideBarAnnotationsPanel({
+  annotationCount, canvasIds, t, windowId, id,
+}) {
   /** */
-  constructor(props) {
-    super(props);
+  const containerRef = useRef();
+  const [display, setDisplay] = useState(false);
 
-    this.containerRef = createRef();
-  }
+  useEffect(() => {
+    console.log(`Use effect ${containerRef}`);
+    console.log(`Use effect ${containerRef.current}`);
+    if(containerRef.current) {
+      containerRef.current.focus();
+    }
+  });
 
-  /**
-   * Returns the rendered component
-  */
-  render() {
-    const {
-      annotationCount, canvasIds, t, windowId, id,
-    } = this.props;
-    return (
-      <CompanionWindow
-        title={t('annotations')}
-        paperClassName={ns('window-sidebar-annotation-panel')}
-        windowId={windowId}
-        id={id}
-        ref={this.containerRef}
-        titleControls={<AnnotationSettings windowId={windowId} />}
-      >
-        <CompanionWindowSection>
-          <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
-        </CompanionWindowSection>
+  return (
+    <CompanionWindow
+      title={t('annotations')}
+      paperClassName={ns('window-sidebar-annotation-panel')}
+      windowId={windowId}
+      className="mirador-annotations-panel"
+      id={id}
+      ref={containerRef}
+      titleControls={<AnnotationSettings windowId={windowId} />}
+    >
+      <CompanionWindowSection>
+        <Typography component="p" variant="subtitle2">{t('showingNumAnnotations', { count: annotationCount, number: annotationCount })}</Typography>
+      </CompanionWindowSection>
 
-        {canvasIds.map((canvasId, index) => (
-          <CanvasAnnotations
-            canvasId={canvasId}
-            containerRef={this.containerRef}
-            key={canvasId}
-            index={index}
-            totalSize={canvasIds.length}
-            windowId={windowId}
-          />
-        ))}
-      </CompanionWindow>
-    );
-  }
+      {canvasIds.map((canvasId, index) => (
+        <CanvasAnnotations
+          canvasId={canvasId}
+          containerRef={containerRef}
+          key={canvasId}
+          index={index}
+          totalSize={canvasIds.length}
+          windowId={windowId}
+
+        />
+      ))}
+    </CompanionWindow>
+  );
 }
 
 WindowSideBarAnnotationsPanel.propTypes = {
@@ -65,3 +66,5 @@ WindowSideBarAnnotationsPanel.defaultProps = {
   canvasIds: [],
   t: key => key,
 };
+
+export default WindowSideBarAnnotationsPanel;
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index 64a1806440f48be886d013f8cb4878be2b1f409d..7323003ccb479480b922b34cf6ef21f1031eec4c 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -48,7 +48,7 @@ const enhance = compose(
   withRef(),
   withTranslation(),
   withSize(),
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true }),
   withPlugins('CompanionWindow'),
 );
 
diff --git a/src/containers/WindowSideBarAnnotationsPanel.js b/src/containers/WindowSideBarAnnotationsPanel.js
index 8370a0c375692dbbf729443fe0607ebab4de0621..4d1a3ec1f52f2696a42b9371e10937ee116f5ad3 100644
--- a/src/containers/WindowSideBarAnnotationsPanel.js
+++ b/src/containers/WindowSideBarAnnotationsPanel.js
@@ -6,7 +6,7 @@ import {
   getVisibleCanvasIds,
   getAnnotationResourcesByMotivation,
 } from '../state/selectors';
-import { WindowSideBarAnnotationsPanel } from '../components/WindowSideBarAnnotationsPanel';
+import WindowSideBarAnnotationsPanel from '../components/WindowSideBarAnnotationsPanel';
 
 /**
  * mapStateToProps - to hook up connect
@@ -23,7 +23,7 @@ const mapStateToProps = (state, { windowId }) => ({
 
 const enhance = compose(
   withTranslation(),
-  connect(mapStateToProps, null),
+  connect(mapStateToProps, null, null, { forwardRef: true }),
   withPlugins('WindowSideBarAnnotationsPanel'),
   // further HOC
 );