diff --git a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
index c0b4176ad3..341b8c7710 100644
--- a/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
+++ b/services/web/frontend/js/features/file-tree/components/file-tree-item/file-tree-item-inner.js
@@ -1,4 +1,4 @@
-import { useEffect, createRef } from 'react'
+import { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
@@ -24,7 +24,7 @@ function FileTreeItemInner({ id, name, isSelected, icons }) {
 
   const { isDragging, dragRef, setIsDraggable } = useDraggable(id)
 
-  const itemRef = createRef()
+  const itemRef = useRef()
 
   useEffect(() => {
     const item = itemRef.current
diff --git a/services/web/frontend/js/features/outline/components/outline-item.js b/services/web/frontend/js/features/outline/components/outline-item.js
index 55ff9b38af..f52aebdd8f 100644
--- a/services/web/frontend/js/features/outline/components/outline-item.js
+++ b/services/web/frontend/js/features/outline/components/outline-item.js
@@ -1,4 +1,4 @@
-import { useState, useEffect, createRef, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'
 import classNames from 'classnames'
@@ -18,7 +18,7 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) {
   const { t } = useTranslation()
 
   const [expanded, setExpanded] = useState(true)
-  const titleElementRef = createRef()
+  const titleElementRef = useRef()
   const isHighlightedRef = useRef(false)
 
   const mainItemClasses = classNames('outline-item', {