reactjs - React Hooks と MapBox を使用した API onClick からの状態の更新とフェッチ

Question

マップの領域をクリックしたときに緯度と経度を使用して API から取得しようとすると問題が発生します。API からのデータが期待どおりに表示されているため、最初のマップの読み込みは問題なく、コンソール ログがこれを示しているため、geoLoc 配列の状態が onClick で更新されていることを確認できます。しかし、何らかの理由で、geoLoc.latitude と geoLoc.longitude の両方の状態が変化しているにもかかわらず、API が更新されていません。これには何か理由がありますか？どんな助けでも大歓迎です！ありがとう

    const Maps = () => {

  const [events, setEvents] = useState([])

  const handleClick = (e) => {
    console.log(geoLoc)
    e.preventDefault()
    setGeoloc({ ...viewport })
  }

  useEffect(() => {

    fetch(`https://api.list.co.uk/v1/events?near=${geoLoc.latitude},${geoLoc.longitude}/5`, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    })
      .then(res => res.json())
      .then(res => setEvents(res))

    console.log(geoLoc.latitude)

    return () => console.log('Unmounting component')

  }, [])

  const [viewport, setViewport] = useState({
    width: '100vw',
    height: '100vh',
    latitude: 51.45523,
    longitude: -2.59665,
    zoom: 13.5

  })

  const [geoLoc, setGeoloc] = useState({
    latitude: 51.45523,
    longitude: -2.59665
  })

  if (events.length === 0) {
    return <div>Loading...</div>
  }

  return <div>
    <ReactMapGL mapboxApiAccessToken={TOKEN}
      mapStyle="mapbox://styles/dredizzle/ck3owxclr138a1cqnzupab2hc"
      {...viewport}
      onViewportChange={viewport => {
        setViewport(viewport)
      }}
      onClick={handleClick}

    >

      {events.map(event => (
        <Popup
          key={event.event_id}
          latitude={event.schedules[0].place.lat}
          longitude={event.schedules[0].place.lng}
        >
        </Popup>
      ))}


      {/* <Popup latitude={51.45523} longitude={-2.59665}>
        <div>event here</div>
      </Popup> */}
      <GeolocateControl
        positionOptions={{ enableHighAccuracy: true }}
        trackUserLocation={false}
      />
    </ReactMapGL>
  </div>
}

export default Maps