Реквизиты whileHover и whileTap не работают, когда я применяю переход

Я анимирую значок с помощью движения кадра, а реквизиты while over и whileTap не работают, когда я применяю переход.

Вот код

 <motion.div
                  animate = {{ x: 0, y: 0 }}
                  initial = {{ x: -100, y: -100, opacity: 0.6 }}
                  whileHover = {{ scale: 1.5, opacity: 1 }}
                  drag = {true}
                  transition = {{ delay : 2 }}
                  whileTap = {{ scale: 0.8, opacity: 1 }}
                  key = {genre.id}
                  className = " cursor-pointer mx-6 my-10 text-2xl text-white list-none"
                >
                  <Icon key = {key} />
</motion.div>

Когда я удалю это

transition = {{delay : 2}}

затем параметры наведения и касания работают правильно.

Но мне нужно отложить исходную анимацию и свойство hover.