Feature hover state not working on Mapbox GL JS

I have added a hover state to the countries in my map, but the hover state only works in the Studio environment and not in any other external embed e.g. iframe or preview.

I have created a codepen to demonstrate the issue: https://codepen.io/jplatford/pen/emOrebx.

Mapbox provides the following snippet. I can see that it hits the handler because of the console log, but the state (name hover-state) never seems to take affect and change the colour of the country currently hovered over.

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);
      map.setFeatureState(feature, { ["hover-state"]: true });
    }

    if (feature) {
      map.setFeatureState(feature, { ["hover-state"]: false });
      feature = null;
    }
  }
});

The fact that you want the features to be highlighted has to be explicit. The hover-state is just the first step that says "this feature is being hovered over" but it doesn't say "this feature has to change color".

I never used MapBox but I did a quick dive into their docs and it appears that features have a "highlight" state. With that it mind, i updated your code to highlight the features when the mouse hovers over them, and undo that when the mouse leaves. It seems the "hover" state still has to be set to true for the highlight to happen, hence why i kept it :

let map = new mapboxgl.Map({
    container: "map",
    style: 'mapbox://styles/eirinigialou/cm6qmuu6w010p01r5hluj8s7q',
    center: [6.34, 28.99],
    scrollZoom: false,
    renderWorldCopies: false,
    height: "100%"
});



map.on('load', () => {
    map.resize();
});


//add interactions
map.addInteraction("move-handler", {
    type: "mousemove",
    target: {
        "layerId": "available-countries"
    },
    handler: (e) => {
        if (e.feature) {
            map.setFeatureState(e.feature, {
                ["hover-state"]: true
            });
            map.setFeatureState(e.feature, {
                ["highlight"]: true
            });
        }
    }
});

map.addInteraction("leave-handler", {
    type: "mouseleave",
    target: {
        "layerId": "available-countries"
    },
    handler: (e) => {
        if (e.feature) {
            map.setFeatureState(e.feature, {
                ["hover-state"]: false
            });
            map.setFeatureState(e.feature, {
                ["highlight"]: false
            });
        }
    }
});

Useful docs link here