tratando de averiguar por qué mi mapa de componentes de la función de reacción tiene un bucle infinito y vuelve a representar el mapa continuamente. He mirado esto por un tiempo y estoy pensando que tiene que ver con useEffects, pero parece que no puedo arreglarlo. Se adjunta una captura de pantalla del error y el código del componente del mapa. déjame saber si necesitas ver otro código

 useJsApiLoader, GoogleMap, DirectionsRenderer, } from "@react-google-maps/api"; import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { Box } from "@chakra-ui/react"; import { useDebouncedCallback } from "../../hooks/useDebouncedCallback"; export default function Map(props) { const router = useRouter(); const { isLoaded } = useJsApiLoader({ googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY, id: "google-map-script", }); const [map, setMap] = useState(/** @type google.maps.Map */ (null)); const [directionsResponse, setDirectionsResponse] = useState(null); async function calculateRoute() { /* eslint-disable */ const directionsService = new google.maps.DirectionsService(); /* eslint-disable */ const results = await directionsService.route({ origin: props.from, destination: props.to, /* eslint-disable */ travelMode: google.maps.TravelMode.DRIVING, }); console.log(results); setDirectionsResponse(results); } useEffect(() => { console.log("useEffect fired!", { asPath: router.asPath }); calculateRoute(); }, [router.asPath]); useEffect(() => { calculateRoute(); }); if (!isLoaded) { return <div>ligma</div>; } return ( <GoogleMap center={directionsResponse} zoom={15} mapContainerStyle={{ width: props.width, height: props.height, borderRadius: "20px", }} options={{ zoomControl: false, streetViewControl: false, mapTypeControl: false, fullscreenControl: false, }} onLoad={(map) => setMap(map)} > <DirectionsRenderer directions={directionsResponse} /> </GoogleMap> ); }