I'm trying to call an API and get the JSON data from that. When I get the data I can't display the properties of the object.

 useEffect(() => {
  fetch(url)
  .then(response => response.json())
  .then(actualData => {
    console.log(actualData)
    setData(actualData)
  }).catch((err) => {
    setError(err.message)
  })
}, [])
return (
<div>
  <h3>{JSON.stringify(data.name)}</h3>
  <p>{error}</p>
  <Link to='/'>Home</Link>
</div>

The console.log output:

{"coord":{"lon":23.5833,"lat":46.0667},"weather":[{"id":804,"main":"Clouds","description":"overcast clouds","icon":"04d"}],"base":"stations","main":{"temp":21.61,"feels_like":21.81,"temp_min":21.61,"temp_max":21.61,"pressure":1014,"humidity":76,"sea_level":1014,"grnd_level":989},"visibility":10000,"wind":{"speed":1.99,"deg":244,"gust":3.92},"clouds":{"all":100},"dt":1657127565,"sys":{"country":"RO","sunrise":1657075288,"sunset":1657131535},"timezone":10800,"id":686578,"name":"Alba Iulia","cod":200}