trying to figure out why my react function component map is infinite looping and continuously rerendering the map. i've stared at this for a while and am thinking it has to do with the useEffects but I can't seem to fix it.. attached is screenshot of error and the map component code. let me know if you need to see other code

  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>
  );
}