react выполняет запросы, не дожидаясь получения State

Хочу создать сайт о погоде, который с помощью navigator.geolocation.getCurrentPositiion получает чистые координаты, а после преобразует в адрес. Этот адрес уже идет в OpenWeatherMap api, возвращая json с погодой.

Дело в том, что когда выполняется запрос с преобразованием координат, то он еще не получает coords.latitude и coords.longitude.

Как заставить его дожидаться изменения переменной? Пробовал вынести этот запрос в отдельный useEffect хук, который реагирует на изменение coords, но тогда выполняется 2 запроса: с пустыми coords и уже заполненными. А надо лишь один, второй.

function App() {

  const [city, setCity] = useState('');
  const [weather, setWeather] = useState({});
  const [coords, setCoords] = useState({});

  useEffect(() => {

    function success(pos) {
      let crd = pos.coords;
      setCoords({
        "latitude": crd.latitude,
        "longitude": crd.longitude
      });
    };

    navigator.geolocation.getCurrentPosition(success);

    axios.get(`https://nominatim.openstreetmap.org/reverse?lat=${coords.latitude}&lon=${coords.longitude}`)
      .then(res => console.log(res.data)); //setCity

    axios.get(apiOWM.url+apiOWM.key)
      .then(res => console.log(res.data)); //setWeather for city
  }, [])

Есть еще вариант перенести все эти запросы на backend, но надо разобраться в любом случае здесь.

И еще не знаю, как вынести все эти запросы в отдельную функцию за пределами App.js. Нужно все записать в виде компонента реакта?

Буду очень благодарен, если укажете на мою ошибку в понимании реакта.