Mapbox Filter is not giving Correct result, when using promoteId

Using events and feature states to create a per feature hover effect. See the example: https://docs.mapbox.com//mapbox-gl-js/example/hover-styles/

by dollysingh3192

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiYWxhbnRnZW8tcHJlc2FsZXMiLCJhIjoiY2pxcmZ1cW1mMG1tcDN4bDVvYzA4MWg5MyJ9.7QtVj_0ythHwEg1n_zaRTQ';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-75.5802,39.8389],
        zoom: 6
    });
    var hoveredStateId = null;

    map.on('load', function () {
        map.addSource('states', {
            'type': 'geojson',
             //"promoteId": "id",
            'data': {"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-75.7886,39.7222],[-75.5802,39.8389],[-75.4151,39.8019],[-75.5584,39.6303],[-75.5128,39.5783],[-75.5605,39.4556],[-75.321,39.2514],[-75.1685,39.0562],[-75.0151,38.7887],[-74.9863,38.4516],[-75.6937,38.4601],[-75.743,39.084],[-75.7886,39.7222]]]},"properties":{"STATE_ID":"10","STATE_NAME":"Delaware"}, "id":123}
]}       
        });

        // 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': 'state-fills',
            'type': 'fill',
            'source': 'states',
            'layout': {},
            'paint': {
                'fill-color': '#627BC1',
                'fill-opacity': [
                    'case',
                    ['boolean', ['feature-state', 'hover'], false],
                    1,
                    0.5
                ]
            }
        });

        map.addLayer({
            'id': 'state-borders',
            'type': 'line',
            'source': 'states',
            'layout': {},
            'paint': {
                'line-color': '#627BC1',
                'line-width': 2
            }
        });

        // When the user moves their mouse over the state-fill layer, we'll update the
        // feature state for the feature under the mouse.
        map.on('mousemove', 'state-fills', function (e) {
            /*...