在gatsby构建中不使用文件，必须转换为钩子

我有一个在gatsby开发服务器中运行良好的脚本，但是当尝试运行gatsby构建时，出现错误提示

"document" is not available during server side rendering.

错误在此代码段上触发

const useActiveElement = () => {
  const [active, setActive] = useState(document.activeElement)

我假设在此文件中我使用文档的任何位置，也可能在我使用文档的useEffect位置之外，也会出现此错误。我如何无法以允许Gatsby构建的方式正确地将代码转换为使用react挂钩。关于我应该做什么的建议？

完整文件（减去进口）

const useActiveElement = () => {
  const [active, setActive] = useState(document.activeElement)

  const handleKeyup = (e) => {
    if (e.keyCode === 9) setActive(document.activeElement)
  }

  useEffect(() => {
    document.addEventListener("keyup", handleKeyup)
    return () => {
      document.removeEventListener("keyup", handleKeyup)
    }
  }, [])

  return active
}

const Layout = ({
                  children,
                  crumbLabel,
                  subStatus,
                  parentPageLabel,
                  parentPageLink,
                }) => {
  const focusedElement = useActiveElement()

  const data = useStaticQuery(graphql`
      query SiteTitleQuery {
          sanitySiteSettings {
              title
          }
      }
  `)

  useEffect(() => {
    const prevTabbedElements = document.getElementsByClassName("tabbed")
    for (let i = 0; i < prevTabbedElements.length; i++) {
      prevTabbedElements[i].classList.remove("tabbed")
    }
    focusedElement.value && focusedElement.value.classList.add("tabbed")
    focusedElement.classList.add("tabbed")
  }, [focusedElement])


  return (
    <>
      <Header siteTitle={data.sanitySiteSettings.title}/>
      <nav>
        {subStatus ? (
          <Parentcrumbs
            crumbLabel={crumbLabel}
            parentPageLabel={parentPageLabel}
            parentPageLink={parentPageLink}
          />
        ) : (
          <Breadcrumbs crumbLabel={crumbLabel}/>
        )}
      </nav>
      <main>{children}</main>

      <Footer/>
    </>
  )
}
Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

在初始渲染点，尚未定义document：

const useActiveElement = () => {
  const [active, setActive] = useState('')

  const handleKeyup = (e) => {
    if (e.keyCode === 9) setActive(document.activeElement)
  }

  useEffect(() => {
    setActive(document.activeElement);

    document.addEventListener("keyup", handleKeyup)
    return () => {
      document.removeEventListener("keyup", handleKeyup)
    }
  }, [])

  return active
}

将useState初始化为空，然后填写componentDidMount（useEffect为空deps）。