diff --git a/src/CanvasListItem.js b/src/CanvasListItem.js
index bc240526d18311d329c8bc0e2a7fb9591d06750e..34f857d041d6e09b64a3f0c4b335d8526ce0a1ee 100644
--- a/src/CanvasListItem.js
+++ b/src/CanvasListItem.js
@@ -1,4 +1,4 @@
-import React, { Component, createRef } from 'react';
+import React, { Component, createRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import DeleteIcon from '@mui/icons-material/DeleteForever';
 import EditIcon from '@mui/icons-material/Edit';
@@ -20,6 +20,8 @@ class CanvasListItem extends Component {
     this.handleMouseHover = this.handleMouseHover.bind(this);
     this.handleDelete = this.handleDelete.bind(this);
     this.handleEdit = this.handleEdit.bind(this);
+
+    console.log(props.ref);
   }
 
   /** */
@@ -89,10 +91,12 @@ class CanvasListItem extends Component {
     console.log('this.props : ', ...this.props);
     const { isHovering } = this.state;
     const { windowViewType, toggleSingleCanvasDialogOpen } = this.context;
+
     return (
       <div
         onMouseEnter={this.handleMouseHover}
         onMouseLeave={this.handleMouseHover}
+        className="mirador-annotation-list-item"
       >
         {isHovering && this.editable() && (
           <div
@@ -126,7 +130,7 @@ class CanvasListItem extends Component {
         <li
           {...this.props} // eslint-disable-line react/jsx-props-no-spreading
         >
-          {children}
+          {/* {children} */}
         </li>
       </div>
     );
@@ -143,4 +147,4 @@ CanvasListItem.propTypes = {
 
 CanvasListItem.contextType = AnnotationActionsContext;
 
-export default CanvasListItem;
+export default forwardRef((props, ref) => <CanvasListItem {...props} containerRef={ref} />);