UseEffect infinite loop primitives as dependencies

1

Its strange. The code is working as expected, the directions are updating correctly, however something is wrong with the useEffect. I dont know why I believe the values in dependency are primitives. it should not keep running over and over.

  useEffect(() => {
    try {
      const lat = buildings[selectedBuildingIndex].data.location.latitude;
      const lng = buildings[selectedBuildingIndex].data.location.longitude;
      setDestination({ lat, lng });
      setDoFetchDirection(true)
    } catch (error) {
      console.error(error);
    }
  }, [buildings, selectedBuildingIndex]);

so buildings is an array of objects, selectedBuildingIndex is primitive, but ive extracted it to be like the following,

    const lat = Number(buildings[selectedBuildingIndex].data.location.latitude);
      const lng = Number(buildings[selectedBuildingIndex].data.location.longitude);
  useEffect(() => {
    try {
      setDestination({ lat, lng });
      setDoFetchDirection(true)
    } catch (error) {
      console.error(error);
    }
  }, [lat, lng]);

its still giving the same errors in the console,
also in their documentation page their example has the exact same error:

here is the full code of the component in question.

import React, { useState, useEffect } from "react";
import {
  DirectionsService,
  DirectionsRenderer,
  Polyline,
} from "@react-google-maps/api";
import { Map } from "../MapGlobal";

import Geocode from "react-geocode";
let GoogleMapsAPI = "keycode7869769yuyuh";
Geocode.setApiKey(GoogleMapsAPI);
Geocode.enableDebug();

const Direction = ({
  selectedBuildingIndex,
  buildings,
  setUserLatLong,
  setadress,
}) => {
  const [destination, setDestination] = useState(null);
  const [origin, setOrigin] = useState(null);
  const [response, setResponse] = useState(null);
  const [path, setPath] = useState(null);
  
  const [zoom, setZoom] = useState(15);
  const [doFetchDirection, setDoFetchDirection] = useState(true)


 
  useEffect(() => {
    if (!navigator.geolocation) {
      console.log("geolocation not allowed");
    } else {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const lat = position.coords.latitude;
          const lng = position.coords.longitude;
          setOrigin({ lat, lng });
          setUserLatLong({ lat, lng });
          Geocode.fromLatLng(
            lat,
            lng
          ).then(
            (response) => {
              const address = response.results[0].formatted_address;
              if(address){
                setadress(address)
              }
            },
            (error) => {
              console.error(error);
            }
          );
          
        },
        (err) => {
          console.error(err);
        }
      );
    }
  }, [setUserLatLong, setadress]);

  useEffect(() => {
    try {
      const lat = buildings[selectedBuildingIndex].data.location.latitude;
      const lng = buildings[selectedBuildingIndex].data.location.longitude;
      setDestination({ lat, lng });
      setDoFetchDirection(true)
    } catch (error) {
      console.error(error);
    }
  }, [buildings, selectedBuildingIndex]);

  const pathOptions = {
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    clickable: false,
    draggable: false,
    editable: false,
    visible: true,
    radius: 30000,

    zIndex: 1,
  };
  console.log("origin =", origin);
  return (
    <div style={{ height: "300px" }}>
      <Map zoom={zoom}>
        {doFetchDirection  && (
          <DirectionsService
            // required
            options={{
              destination: destination,
              origin: origin,
              travelMode: "DRIVING",
            }}
            // required
            callback={(response) => {
              console.log(response);
              if (response !== null) {
                if (response.status === "OK") {
                  console.log("response =", response);
                  setResponse(response);
                } else {
                  console.log("response: ", response);
                  setPath([origin, destination]);
                  setZoom(3);
                }
              }
            }}
          />
        )}

        {response !== null && (
          <DirectionsRenderer
            // required
            options={{
              directions: response,
            }}
          />
        )}

        {path && (
          <Polyline
            onLoad={() => console.log("drawing polyline")}
            path={path}
            options={pathOptions}
          />
        )}
      </Map>
    </div>
  );
};

export default Direction;