如何在hover抽屉菜单时实现两张图片无延迟瞬间切换？

我有一个用作菜单的抽屉组件，顶部放置了一张图片，底部是功能图标。用户hover触发抽屉展开时，会显示尺寸更大的品牌图和带文字说明的功能图标。

当前遇到的问题：抽屉展开的过渡动画过程中，第一张小图会被异常放大，且会停留1~5秒才会切换为第二张大图，不符合预期效果。

期望实现效果：hover触发抽屉展开的瞬间，第一张图片立刻隐藏，为第二张图片腾出显示位置，消除切换延迟问题。
（hover时菜单响应滞后属于另外的独立问题，暂不处理）

问题演示已录制为gif存档。

当前切换两张图片的代码如下：

<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>

请问有没有更简单高效的方式实现这个图片切换效果？
（也不排除问题出在我本地设备环境的可能性）
如果需要补充其他代码片段可以告知。

问题更新 #

在大家的帮助和建议下，问题已经解决！最终实现代码如下：

<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>

该方案参考了Maxdola的建议：同时渲染两张图片，通过display: 'none'属性控制其中一张的显隐。虽然不算最优解，但完美解决了我遇到的切换延迟问题，非常感谢各位的帮助。

内容的提问来源于stack exchange，提问作者Quentin