How to change color of Layers?

[Ankur-Magan]

I am trying to implement Indoor Stadium map, where I want to highlight the section on a specific condition when map loads.

{
  "version": 8,
  "name": "base",
  "glyphs": "https://d2d6ul3tefw3xz.cloudfront.net/production/venue-maps/fonts/{fontstack}/{range}.pbf",
  "sources": {
    "base": {
      "type": "vector",
      "tiles": [
        "https://d2d6ul3tefw3xz.cloudfront.net/production/venue-maps/layouts/453/183_1710956260/tiles/{z}/{x}/{y}.pbf"
      ]
    }
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#FFFFFF"
      },
      "source": "base",
      "source-layer": "base"
    },
    {
      "id": "venue",
      "type": "fill",
      "source": "base",
      "filter": ["==", "c", "stadium"],
      "paint": {
        "fill-color": "#F5F5F5"
      },
      "source-layer": "base"
    },
    {
      "id": "venue-outline",
      "type": "line",
      "source": "base",
      "filter": ["==", "c", "stadium"],
      "paint": {
        "line-color": "#B4B4B4",
        "line-width": 1.5
      },
      "source-layer": "base"
    },
    {
      "id": "section-backdrop",
      "type": "fill",
      "source": "base",
      "minzoom": 22,
      "filter": ["==", "t", "s"],
      "paint": {
        "fill-color": "#E6E6E6"
      },
      "source-layer": "base"
    },
    {
      "id": "section",
      "type": "fill",
      "source": "base",
      "maxzoom": 22,
      "filter": ["==", "t", "s"],
      "paint": {
        "fill-color": [
          "case",
          ["boolean", ["feature-state", "selected"], false],
          "#FFD27F",
          ["boolean", ["feature-state", "hovered"], false],
          "#6BBEFF",
          ["boolean", ["feature-state", "available"], false],
          "#7CC6FF",
          "#E6E6E6"
        ]
      },
      "source-layer": "base"
    },
    ]
    }

I have added the fill-color for specific states such selected hovered or available but how can I tell map to colour layer as per specific case:
Note : hovered is not applicable for mobile

Sample Style JSON :
mobile-style.json

Current Map Screen Shot

Sample Code :
I am currently using Shape Source to highlight particular section when user presses the map, by getting the feature from queryRenderedAtPoint

 <View style={styles.container}>
      <MapView
        onPress={onPress}
        testID={formatTestID('venue-map')}
        ref={mapRef}
        style={styles.map}
        logoEnabled={false}
        styleURL={JSON.stringify(mapbox.styleJSON)}
      >
        <Camera
          ref={cameraRef}
          defaultSettings={defaultCamera}
          zoomLevel={4}
          minZoomLevel={2}
          maxZoomLevel={22}
        />
        {mapState?.selectedGeoJSON?.length
          ? mapState?.selectedGeoJSON?.map((shape, index) => {
              return (
                <ShapeSource id={`selectedGeoJson-${index}`} shape={shape} key={`${index}`}>
                  <FillLayer id={`selectedSectionFill-${index}`} style={styles2.selectedSection} />
                </ShapeSource>
              );
            })
          : null}
      </MapView>
    </View>