动态更新选项的Select菜单展开时高亮位置未同步选中值的问题咨询

我有一个带动态选项的下拉选择菜单，大致结构如下：

<select>
  {options}
</select>

页面加载时，我会获取用户当前所在国家并渲染成这样：

<select>
  <option value="italy">Italy</option>
</select>

当select元素获得焦点时，我会获取所有可用国家，渲染成：

<select>
  <option value="england">England</option>
  <option value="france">France</option>
  <option value="denmark">Denmark</option>
  <option value="spain">Spain</option>
  <option value="germany">Germany</option>
  <option value="italy">Italy</option>
</select>

（我没有把所有国家和当前国家一起获取，是为了减少页面加载时间）

问题 #

如果下拉菜单在展开状态时选项被替换，高亮会停留在原来的位置（selectedIndex没有根据新的value="italy"的位置更新）

复现步骤 #

浏览器：Google Chrome 或 Microsoft Edge（在Firefox中无法复现）

1. 打开对应的测试示例
2. 点击下拉选择菜单
3. 观察现象

期望结果 #

我希望选项替换后，高亮能自动移动到'Italy'选项上

已尝试方案 #

我试过修改selectedIndex：

useEffect(() => {
  if (optionsAreLoaded) {
    selectRef.current.selectedIndex = 6
  }
}, [options]);

但这对高亮位置没有任何影响

我还看到过一个类似的问题，提问者自己回答说需要在选项列表变化时重置select的value。于是我试了这个：

useEffect(() => {
  setSelectedOption({ id: undefined, value: "", label: "" });
}, [options]);

但同样，高亮位置还是没有变化

疑问 #

我能否在菜单展开时更新高亮位置？
我是不是必须从零开始自己实现一个选择菜单，或者使用现成的库（比如React-select/Mantine等）？

备注：内容来源于stack exchange，提问作者Pål Stakvik