React useState - 状态未更新

Question

我正在尝试更改地图的状态。我的代码很简单。但我不知道为什么它不起作用。

const [mapCenter, setMapCenter] = useState({ lat: 34.80746, lng: -40.4796 });

 const onCountryChange = async (e) => {
    const countryCode = e.target.value

    const url = countryCode === 'Worldwide' ? 'https://disease.sh/v3/covid-19/all' : `https://disease.sh/v3/covid-19/countries/${countryCode}`

    await fetch(url).then(response => response.json()).then((data) => {
      setCountry(countryCode);
      setCountryInfo(data);
      
      console.log(data.countryInfo.lat, data.countryInfo.lng)

      setMapCenter([data.countryInfo.lat, data.countryInfo.lng]);
      setMapZoom(6)
      console.log(mapCenter, mapZoom)
    })
  }

在我的 onCountryChange 函数中，我从 API 调用数据并在 UI 中设置数据，这工作正常，但 setMapCenter 数据无法更新。当我记录从 API 得到的响应时，我在控制台中得到了正确的响应，但是当我记录 mapCenter 的状态时，它仍然返回初始状态......请问我做错了什么？