(มือใหม่) ช่วยดู React ให้ผมหน่อยครับผม ผมดึง ค่าใน useState ไม่ได้ครับ

สวัสดีครับ
รบกวนสอบถามหน่อยครับผม
ผมจะดึงค่า สภาพอากาศ ผมแปลงค่า json เก็บไว้ที่ตัวแปล data แล้วใช้ useState เก็บค่า data เข้าไปที่ useState city ครับ

const [city, setCity] = useState({})

ตามภาพนี้ครับ




แต่ว่า ไม่รู้ทำไม ทุกครั้งที่ผมจะดึงค่าใน city เช่น city.sys.country จะดึงค่า sys ใน API ไม่ได้ครับ จะมี... ที่ตัวแปลที่จะดึงทุกอันเลยครับ
ใน state city ก็มีข้อมูลอยู่นะครับ แต่ดึงไม่ได้
ไม่รู้ว่าผมทำผิดตรงไหนหรือป่าวครับผม

นี่คือลิ้งค์ API นะครับ
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้http://api.openweathermap.org/data/2.5/weather?q=bangkok&units=metric&&appid=9dde8ac4db1fa5a795d90bd73a2fd364

นี่คือตัวอย่างโค้ดของผมครับผม
[Spoil] คลิกเพื่อดูข้อความที่ซ่อนไว้import { useEffect,useState } from "react";
import "./App.css";

function App() {
  const name = "bangkok";
  const apiKey = "9dde8ac4db1fa5a795d90bd73a2fd364";

  const [city, setCity] = useState({})

  useEffect(() => {
    const url = `http://api.openweathermap.org/data/2.5/weather?q=${name}&units=metric&&appid=${apiKey}`
    fetch(url)
      .then(res => res.json())
      .then(data => {
        setCity(data)
      })
  }, [])
  
   
  return (
    <div className="App">
      <section>
        <div className="location">
          <h1 className="city">{city.name}</h1>
          <p className="city">{city.sys.country}</p>
        </div>
        <div className="card">
          <div className="weather">
            <h1>{city.main.temp}&deg;c</h1>
            <small>
              min : {city.main.temp_min}&deg; , max :{" "}
              {city.main.temp_max}&deg;
            </small>
          </div>
          <div className="info">
            <div className="status">{city.weather[0].main}</div>
            <div className="humidity">ความชื้น : {city.main.humidity}</div>
            <div className="wind">ความเร็วลม : {city.wind.speed}</div>
          </div>
        </div>
      </section>
    </div>
  );
}
export default App;