my useEffect is in an infinite loop and i dont know why

Question

my code is

  const Weather = ({lat, lng}) => {
    console.log('%cApp.js line:37 lat, lng', 'color: #007acc;', lat, lng);
    useEffect (() => {
      axios
        .get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=cc76bb943e6b3254cef79ff11e899572`)
        .then(response => {
          setWeather(response.data)
        }
      )
    }, [])
    
    console.log (weather)
    return (<h1>hi</h1>)

  }

weather function is running in an infite loop. eventhough i am passing an empty object at the end of useEffect. i have 0 clue as to what might be causing this problem.

import axios from 'axios'
import { useState, useEffect } from 'react'
import React from 'react'


const App = () => {

  const [countryList, setCountryList] = useState([])
  const [searchTerm, setSearchTerm] = useState('')
  const [selectedCountry, setSelectedCountry] = useState()
  const [weather, setWeather] = useState()

  

  const hook = () => {
    console.log('effect')
    axios
      .get('https://restcountries.com/v3.1/all')
      .then(response => {
        console.log('promise fulfilled')
        setCountryList(response.data)
      })


  }



  useEffect(hook, [])

  const handleSetFilter = (event) => {
    console.log(event.target.value)
    setSearchTerm(event.target.value)
  }

  const Weather = ({lat, lng}) => {
    console.log('%cApp.js line:37 lat, lng', 'color: #007acc;', lat, lng);
    useEffect (() => {
      axios
        .get(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=cc76bb943e6b3254cef79ff11e899572`)
        .then(response => {
          setWeather(response.data)
        }
      )
    }, [])
    
    console.log (weather)
    return (<h1>hi</h1>)

  }

  const SearchResultRow = (countrySearchResult) =>
    <li key={countrySearchResult.id}>
      {countrySearchResult.name.common} <button onClick={(() => setSelectedCountry(countrySearchResult))} type="button">Show</button>
    </li>

  const SearchResults = ({ countryList, searchTerm } /* props */) => {
    console.log("countryList:", countryList)
    const filteredCountries = countryList.filter((c) =>
      c.name.common.toLowerCase()
        .includes(
          searchTerm.toLowerCase()
        )
    )

    if (filteredCountries.length > 10)
      return (<li>Too maany matches, specify another filter</li>)

    if (filteredCountries.length > 1)
      return (
        filteredCountries.map((countrySearchResult) => SearchResultRow(countrySearchResult))
      )

    if (filteredCountries.length === 1)
      setSelectedCountry(filteredCountries[0])
  }

  const CountryDetails = ({ countryData }) => {
    console.log("countryData:", countryData)
    console.log('%cApp.js line:80 countryData.latlng[0]', 'color: #007acc;', Math.round(countryData.latlng[0]));
    console.log('%cApp.js line:81 countryData.latlng[1]', 'color: #007acc;', Math.round(countryData.latlng[1]));
    return (
     
      <>
        <h1>{countryData.name.common}</h1>
        <br></br>
        <p>{countryData.capital}</p>
        <p>{countryData.area}</p>
        <h3>Languages</h3>
        <ul>
          {Object.values(countryData.languages).map((language) => <li key={JSON.stringify(language)}><p>{JSON.stringify(language)}</p></li>)}
        </ul>
        <img src={countryData.flags.png} alt="country flag"></img>
        <div>
          {<Weather lat = {Math.round(countryData.latlng[0])} lng = {Math.round(countryData.latlng[1])}/>}
        </div>
      </>
    )
  }


  return (
    <>
      <form>
        <div>find countries <input value={searchTerm} onChange={handleSetFilter} /></div>
        <div>
          {selectedCountry ? <CountryDetails countryData={selectedCountry} /> : <SearchResults countryList={countryList} searchTerm={searchTerm} />}
        </div>
      </form>
    </>
  )
}

export default App;

the code that is triggering the weather function.