How to detect hover state in React

import React, { useRef } from 'react'
import { useHoverDirty } from 'react-use'
import { THEME_PALETTE } from '../../../../lib/constants'
import classNames from 'classnames'
import { Link, LinkProps } from 'react-router-dom'

type Props = LinkProps & {
  children: React.ReactNode
}

const ColumnCard: React.FC<Props> = ({
  children,
  style,
  className,
  ...props
}) => {
  const containerRef = useRef<HTMLAnchorElement | null>(null)
  const isHovered = useHoverDirty(containerRef)

  return (
    <Link
      {...props}
      ref={containerRef}
      className={classNames(
        'd-flex flex-shrink-0 justify-content-center align-items-center w-100 cursor-pointer hover-no-underline',
        className,
      )}
      style={{
        backgroundColor: isHovered ? THEME_PALETTE['gray-100'] : 'white',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: isHovered ? THEME_PALETTE.primary : '#D5D5D5',
        borderRadius: '10px',
        minHeight: '96px',
        ...style,
      }}
    >
      {children}
    </Link>
  )
}

export default ColumnCard