Convert createRef to preferred useRef

Author: george

app/components/PageHeader/PageHeader.js

@@ -1,12 +1,12 @@
-import React, { createRef, useState, useEffect } from "react"
+import React, { useRef, useState, useEffect } from "react"
 import { withLastLocation } from "react-router-last-location"
 import PropTypes from "prop-types"
 
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
 const PageHeader = props => {
   const [tabIndex, setTabIndex] = useState(FOCUSABLE_TABINDEX)
-  const headerRef = createRef()
+  const headerRef = useRef(null)
 
   useEffect(() => {
     if (props.lastLocation) {

app/layouts/Main/Main.js

@@ -14,12 +14,14 @@ import "./styles.scss"
 import { FOCUSABLE_TABINDEX, UNFOCUSABLE_TABINDEX } from "./constants"
 
 export default function Main() {
+  const headerRef = React.useRef(null)
+  const mainRef = React.useRef(null)
   const Attributes = {
     TABINDEX: "tabindex",
   }
+  const getHeaderTabIndex = () => headerRef.current.getAttribute(Attributes.TABINDEX)
+  const getMainTabIndex = () => mainRef.current.getAttribute(Attributes.TABINDEX)
 
-  const headerRef = React.createRef()
-  const mainRef = React.createRef()
   const componentUnmountFunction = () => {
     ContextUtil.disableFocusOutline()
   }
@@ -34,9 +36,6 @@ export default function Main() {
     ref.current.focus()
   }
 
-  const getHeaderTabIndex = () => headerRef.current.getAttribute(Attributes.TABINDEX)
-  const getMainTabIndex = () => mainRef.current.getAttribute(Attributes.TABINDEX)
-
   const handleHeaderBlur = () => {
     if (getHeaderTabIndex() === UNFOCUSABLE_TABINDEX) return
     headerRef.current.removeAttribute(Attributes.TABINDEX)