Tengo un cajón que sirve de menú. Hay una imagen en la parte superior e iconos en la parte inferior. Cuando el usuario pasa el cursor sobre el cajón, se expande para mostrar una imagen más grande e íconos con texto.

Mi problema es: durante esta transición de ampliación, la primera imagen se amplía (no es buena) y permanece de 1 a 5 segundos y luego da paso a la segunda.

Me gustaría hacer que cuando el usuario pase el cursor sobre el cajón, la primera imagen se oculte inmediatamente para dejar espacio para la segunda. Quiero que se elimine este "retraso".

(El hecho de que el menú no reaccione inmediatamente cuando pasas el mouse por encima es otro problema ^^)

Aquí hay un gif del problema: https://gyazo.com/064245b3bc87cabf6ffa62b51c506025

Y este es el código que uso para cambiar entre estas 2 imágenes:

 <a href={'/'} className={'brand'}> {sideWidth >= 200 ? <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'}/> : <img src='/images/SI.svg' className={"logoHub"} alt={"Logo Si infra"} /> } </a>

¿Hay alguna manera más fácil o "más rápida" de hacer esta transición de imagen?

(O tal vez el problema es con mi PC (Es local))

Si necesitas un código más visible, dímelo.

EDITAR :

¡Con la ayuda y el consejo de todos los miembros, el problema está resuelto! El código :

 <a href={'/'} className={'brand'}> {sideWidth >= 200 ? <> <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'}/> <img src={'/images/SI.svg'} className={"logoHub"} alt={"Logo Si infra"} style={{display:'none'}} /> </> : <> <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'} style={{display:'none'}}/> <img src={'/images/SI.svg'} className={"logoHub"} alt={"Logo Si infra"} /> </> } </a>

Como Maxdola me aconsejó, renderizo ambas imágenes pero decido ocultar una con "display: 'none'". ¡Puede que esta no sea la mejor solución, pero resuelve mi problema! Muchas gracias !