React. Изменение стилей при наведении на компонент

Не понимаю, почему не работает код. Кто-нибудь может подсказать? Знаю, что можно через useState сделать то, что я хочу, но просто интересно, почему через useRef не работает. Нужно при наведении на Item сделать HoverItem display: block.

import styled from 'styled-components'
import { getCurrency } from '../Functions/secondaryFunction'
import { useContext, useRef } from 'react'
import { Context } from '../Functions/context'

const List = styled.ul`
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
`
const Item = styled.li`
  width: 210px;
  height: 296px;
  margin-top: 20px;
  color: white;
  z-index: 1;
  position: relative;
  &:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 50%;
    z-index: -1;
  }
  &:hover {
    cursor: pointer;
    transition: box-shadow 0.3s ease-in-out, border 0.3s ease-in-out;
    color: black;
    box-shadow: 1px 1px 6px rgb(0 0 0 / 20%);
    border: 1px solid #cccccc;
    height: 350px;
    &:after {
      opacity: 0;
    }
  }
`
const ItemImg = styled.img`
  width: 100%;
  height: 296px;
`
const HoverItem = styled.div`
  display: none;
`
export const ListItem = ({ itemList }) => {
  const { openItem: { setOpenItem } } = useContext(Context) 
  const refHoverItem = useRef(null)
  const hoverEffect = () => {
    refHoverItem.style.display = 'block'
  }
  return (
    <List>
      {itemList.map(item => (
        <Item 
          key={item.id}
          onClick={() => setOpenItem(item)}>
          <ItemImg src={item.img}/>
        <HoverItem ref={refHoverItem} onMouseEnter={() => hoverEffect()}>
          <p>{item.name}</p>
          <p>{getCurrency(item.price)}</p>  
        </HoverItem>
        </Item>
      ))}
    </List>
  )
}