Помогите убрать обработку события при дальнейшем наведении

Есть табличка, которая меняется при наведении. но проблема в том, что если ты на нее наводишь и задеваешь еще какой-то блок внутри, она продолжает отрабатывать. Подскажите, что и где нужно добавить/изменить, чтоб отрабатывал правильно: При наведении на карточку(она делала ротэйт один раз), а когда убираешь курсор с нее, она возвращается в предыдущие положение. код: https://codepen.io/okylist/pen/abYWKPp

    const wr = document.querySelectorAll('.wrapper')

wr.forEach((items) => {
    items.addEventListener('mouseover', (e) => {
                    console.log(e.target);
                    setTimeout(() => {
            items.children[0].style.display = "none"
            items.children[1].style.display = "none"
            items.children[2].style.display = "block"
        }, 300)
    })
    items.addEventListener('mouseout', (e) => {
        setTimeout(() => {
          console.log(e.target);
            items.children[0].style.display = "block"
            items.children[1].style.display = "block"
            items.children[2].style.display = "none"
        }, 300)
    })
})