I'm trying to create an animated Sidebar navigation. To do so I have 2 states for the link of the items. There is an active state and hover state. Active state is activated on click and hover is activated when the link is hovered, main problem I'm facing is that I'm using hash router to link to components on page. This makes it hard to implement a simple check like if(pathame === item.link.

import { FC, useEffect, useRef, useState } from 'react'
import { HashLink as Link } from 'react-router-hash-link'
import { SidebarItemProps } from '../../models/SidebarItem'

type SidebarLinkProps = {
  item: SidebarItemProps
}

const Submenu: FC<SidebarLinkProps> = ({ item }) => {
  const [active, setActive] = useState(false)
  const [hover, setHover] = useState(false)
  const link = useRef(null)
  useEffect(() => {
    if (document.activeElement === link.current) {
      setActive(true)
    } else {
      setActive(false)
    }
  }, [])

  return (
    <Link
      to={item.path}
      smooth
      ref={link}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => setActive(true)}
      className={
        'sidebar-link ' +
        (active || hover ? 'scale-up-center active' : 'scale-down-center')
      }
    >
      <span className="label">{item.title}</span>
    </Link>
  )
}

export default Submenu

this is my component currently I've tried using refs but since there are multiple items getting rendered here the document.activeElement and link.current is staying true when I click on a different element.