React开发谷歌地图式地点搜索：<map>与<menu>组件切换最优方案咨询

我正在开发一款类似谷歌地图的地点搜索功能，点击地点<input>框时，需要渲染<menu>组件来替代默认显示的<map>组件。尝试过几种切换方式，但都存在问题，希望找到兼顾性能与规范的方案：

已尝试的方法及问题 #

1. CSS隐藏<map>组件 #

• 问题：<map>组件渲染异常——界面显示但屏幕呈灰色，怀疑是重渲染过多导致连接中断
• 代码示例：

<div className={`${showMenu ? 'hidden' : ''}`}>
    <map />
</div>

2. 条件渲染 #

• 问题：同样存在重渲染次数过多的问题
• 代码示例：

{ !showMenu && <map /> }

3. 绝对定位容器重叠元素 #

• 问题：性能表现良好，但这种元素重叠方式似乎不符合最佳实践
• 代码示例：

<map />

{ showMenu && (
    <div className='absolute left-0 top-0 h-screen'>
        <menu />
    </div>
)}

需求 #

希望找到兼顾最佳性能与规范的实现方案

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