Фильтровать объекты в представлении карты React-Map-gl React Hooks

Question

Я довольно новичок в React и JavaScript, пытаюсь написать фильтр queryRenderedFeatures для моего проекта React Hooks, используя React-Map-gl.

Проект имеет огромный список данных, и я хотел бы только отфильтровать данные, отображаемые в представлении карты. Как показывает этот пример на Mapbox-gl- js: https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/?q=geojson%20source&size=n_10_n

Из документации React-Map-gl: https://uber.github.io/react-map-gl/docs/api-reference/static-map#getmap Это говорит о том, что вы будет иметь возможность использовать queryRenderedFeatures в качестве метода для карты c, но способ, который я добавил, кажется неправильным ... И в Интернете не так много ресурсов: /

Любая помощь будет принята с благодарностью ! :)

export default function Map() {


  const [data, setData] = useState()
  const [viewport, setViewport] = useState({
    latitude: -28.016666,
    longitude: 153.399994,
    zoom: 12,
    bearing: 0,
    pitch: 0
  })
  const mapRef = useRef()


  useEffect(() => {
    fetch('../data.json')
      .then(res => res.json())
      .then(res => setData(res))
  },[])


  function features () { 
    mapRef.current.queryRenderedFeatures( { layers: ['ramps'] })
  }


  function filterRamps (e) {
    data.features.filter(feature => {
      return feature.properties.material === e.target.value
    })
  }


  const handleClick = () => {
    setData(filterRamps())
  }


  if (!data) {
    return null
  }


  return (
    <div style={{ height: '100%', position: 'relative' }}>
      <MapGL
        ref={mapRef}
        {...viewport}
        width="100%"
        height="100%"
        mapStyle="mapbox://styles/mapbox/dark-v9"
        onViewportChange={setViewport}
        mapboxApiAccessToken={Token}
        queryRenderedFeatures={features}
      >
        <Source type="geojson" data={data}>
          <Layer {...dataLayer} />
        </Source>

      </MapGL>

      <Control
        data={data}
        onClick={handleClick}
      />
    </div>


  )
}