Doing some tests, trying to let user click on a COUNTY and all counties belonging to STATE x get highlighted.

You can see running [here][1]


  [1]: http://jsfiddle.net/01b97w0L/673/

    var map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "name": "blank",
                "sources": {
                    "empty": {
                        "type": "vector",
                        "url": ""
                    }
                },
                "layers": [{
                    "id": "background",
                    "type": "background",
                    "paint": {
                        "background-color": "#1d1f20"
                    }
                }]
            },
            center: [-82, 39],
            zoom: 3,
            debug: 2
        });
        var hoveredStateId = null;

        map.on('load', function() {
            map.addSource("counties", {
                "type": "vector",
                "url": "mapbox://reyemtm.28b260nr"
            });

            // The feature-state dependent fill-opacity expression will render the hover effect
            //  when a feature's hover state is set to true.
            map.addLayer({
                "id": "fill",
                "type": "fill",
                "source": "counties",
                "source-layer": "us_counties-8xelrv",
                "layout": {},
                "paint": {
                    "fill-color": ["case", ["boolean", ["feature-state", "hover"], false], "whitesmoke", "firebrick"],
                    "fill-opacity": 1
                }
            })

            function getUniqueFeatures(array, comparatorProperty) {

                var existingFeatureKeys = {};
                var uniqueFeatures = array.filter(function(el) {
                    if (existingFeatureKeys[el.properties[comparatorProperty]]) {
                        return false;
                    } else {
                        existingFeatureKeys[el.properties[comparatorProperty]] = true;
                        return true;
                    }
                });

                return uniqueFeatures;
            }

            map.on("click", "fill", function(e) {
                if (e.features.length > 0) {

                    var state_code = e.features[0].properties.STATE;
                    console.info(state_code)
                    var relatedFeatures = map.querySourceFeatures('counties', {
                        sourceLayer: 'us_counties-8xelrv',
                        filter: ['==', 'STATE', state_code]
                    });

                    var uniqueFeatures_state = getUniqueFeatures(relatedFeatures, "STATE");
                    var uniqueFeatures_id = getUniqueFeatures(relatedFeatures, "id");
                    console.log(uniqueFeatures_state)


                    relatedFeatures.forEach(function(f) {
                        console.log(f.id) //18
                        console.log(f.properties.STATE) //allways the same, this is good
                        var s = {
                            source: 'counties',
                            sourceLayer: 'us_counties-8xelrv',
                            id: f.id
                        };
                        map.setFeatureState(s, {
                            hover: true
                        });
                    });
                }
            });
        });

Console gives the correct info (that is, ids are unique and state_code is the same for all filtered features when click on one county). Curiously Texas is one of the few working correctly, but, when zooming in/out, highlighting becomes a chaos.

I have also tried using uniqueFeatures_state as the object to iterate over, with no success.

thanks