Реагируйте js onMouseLeave не срабатывает, когда мышь движется быстро

Question

Есть список следующих элементов:

function UserItem (props) {

const [showPic, setMode] = useState(false);

return (
<div>
    <div
      onMouseEnter={() => setMode(true)}
      onMouseLeave={() => setMode(false)}
    >
      {showPic && <div>PIC</div>}  
      {!showPic && <div>{props.login}</div>}
    </div>
</div>    
)
}

Проблема в том, что при быстром перемещении мыши onMouseLeave не срабатывает по всем элементам. Я понимаю, что это как-то связано с делегированием. Но не могу понять, что именно. Оба события должны запускаться по точному элементу, к которому они присоединены. Есть идеи?

Answer 1

Я не уверен, что это ошибка. Но можете ли вы попробовать вот так?

{showPic == true ? <div>PIC</div> : <div>{props.login}</div>}

Если это не помогло, вы должны сообщить об ошибке.