React question about geofire and useEffect

Hi I have question about react, I don't have much experience. I'm trying to do a query with geoFire and get the location, after that find the data in my db.

Geofire creates an event that I'am subscribed and send me the closest locations.

This moment I have query with geoFire and with an useEffect I do update in my state for caching the values.

Whent I update my state this action breaks geofire event and must start again from the beginning. So this is a problem? or is there a better solution ?

import React, {useState, useEffect} from 'react';import {View, Text} from 'react-native';import {GeoPosition, GeoError} from 'react-native-geolocation-service';import {getCurrentLocation, LocationInfo} from '../../util/geolocation';import GeoFireService from './services/GeoFireService';// import AdService from './services/AdService';// import { GeoQuery } from 'geofire';interface CurrentLocation {  [key: string]: {    location: [number, number];    distance: number;  };}const Ads = () => {  const [locationInfo, setLocationInfo] = useState({    latitude: 0,    longitude: 0,    altitude: 0,    accuracy: 0,  } as LocationInfo);  const [query, setQuery]: [GeoQuery | null, Function] = useState(null);  const [currentLocation, setCurrentLocation] = useState([] as Array<string>);  // set the current location  useEffect(() => {    getCurrentLocation(      (position: GeoPosition) => {        const {latitude, longitude, accuracy, altitude} = position.coords;        setLocationInfo({latitude, longitude, accuracy, altitude});      },      (err: GeoError) => {        console.log(err);      },    );  }, []);  // set the event query  useEffect(() => {    (async () => {      const geoFireQuery = await GeoFireService.getQuery(        [-34.5742746, -58.4744191],        30,      );      setQuery(geoFireQuery);      return () => geoFireQuery.cancel();    })();  }, []);  useEffect(() => {    if (query) {      (query as GeoQuery).on('key_entered',        (key: string, location: [number, number], distance: number) => {          if (!currentLocation.includes(key)) {            console.log(key);            setCurrentLocation([...currentLocation, key]);          }        },      );    }  });  return (<View><Text>        Latitude: {locationInfo.latitude} Longitude: {locationInfo.longitude}</Text>      {/* {Object.keys(currentLocation).map((key: string) => (<Text key={key}>          Ubicacion: {key}, Km: {currentLocation[key].distance.toFixed(2)}</Text>      ))} */}</View>  );};export default Ads;

This momento I have 3 location but this repeats too much. Console output should only show three locations

[Sun Jun 07 2020 20:06:14.990]  LOG      1wr0cDenn4DmJ8S0xraG[Sun Jun 07 2020 20:06:14.120]  LOG      58zvRXriUELSW96HprHh[Sun Jun 07 2020 20:06:14.121]  LOG      58zvRXriUELSW96HprHh[Sun Jun 07 2020 20:06:14.122]  LOG      58zvRXriUELSW96HprHh[Sun Jun 07 2020 20:06:14.134]  LOG      58zvRXriUELSW96HprHh[Sun Jun 07 2020 20:06:14.145]  LOG      1wr0cDenn4DmJ8S0xraG[Sun Jun 07 2020 20:06:14.158]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.159]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.160]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.174]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.187]  LOG      1wr0cDenn4DmJ8S0xraG[Sun Jun 07 2020 20:06:14.188]  LOG      58zvRXriUELSW96HprHh[Sun Jun 07 2020 20:06:14.189]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.198]  LOG      1wr0cDenn4DmJ8S0xraG[Sun Jun 07 2020 20:06:14.199]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.240]  LOG      2Y5DBEsPQ1eFosxoAimB[Sun Jun 07 2020 20:06:14.286]  LOG      1wr0cDenn4DmJ8S0xraG