Mapbox GL JS 要素悬停状态在外部嵌入环境中无法工作求助

大家好，我最近在做Mapbox GL JS地图开发时卡壳了，想请各位帮忙看看：

我给地图里的「available-countries」图层加了鼠标悬停变色的效果，在Mapbox Studio里测试时完全正常，但把地图嵌入到iframe或者外部预览页面时，这个悬停状态就彻底失效了——鼠标移上去完全没反应。

我用了Mapbox官方思路写的交互逻辑，代码大概是这样的：

let feature = null;
map.addInteraction("move-handler", {
  type: "mousemove",
  target: {
    "layerId": "available-countries"
  },
  handler: (e) => {
    if (e.feature) {
      // 先把之前的悬停要素状态重置
      if (feature) {
        map.setFeatureState(feature, { "hover-state": false });
      }
      feature = e.feature;
      console.log(feature); // 这里能正常打印要素对象，说明handler触发了
      map.setFeatureState(feature, { "hover-state": true });
    } else {
      // 鼠标移出要素时重置状态
      if (feature) {
        map.setFeatureState(feature, { "hover-state": false });
        feature = null;
      }
    }
  }
});

我排查了半天，控制台能正常输出要素信息，说明这个mousemove的handler确实被触发了，但就是没法通过setFeatureState把hover-state状态应用到要素上，地图上的国家颜色完全没变化。

有没有大佬遇到过类似的情况？或者能帮我揪出代码里的问题，为啥在外部嵌入环境里状态就不生效了？

备注：内容来源于stack exchange，提问作者JakePlatford