How to Render Fetched Object Items in React Component

How do I render an object that I’ve fetched in React?

Here is my code:

const PrayerTimesByCity = () => {
  // Initiate array for fetching data from AlAdhan API
  const [data, setPrayerTimes] = useState({});

  useEffect(() => {
    fetch(
      "http://api.aladhan.com/v1/timingsByCity?city=Helsingborg&country=Sweden&method=0"
    )
      .then((resp) => resp.json())
      .then((data) => setPrayerTimes(data));
  }, []);

  console.log(data);

  return <div> // Here is where I want my objects to return </div>;
};

Here is what the fetched data returns:

{
  "code": 200,
  "status": "OK",
  "data": {
    "timings": {
      "Fajr": "06:42",
      "Sunrise": "09:00",
      "Dhuhr": "12:13",
      "Asr": "13:17",
      "Sunset": "15:27",
      "Maghrib": "16:00",
      "Isha": "17:29",
      "Imsak": "06:32",
      "Midnight": "00:13"
    }
}

I want to extract “data” and then “timings” and then each respective item and its key. How do I do this in my return statement in my component?

Thanks for any answer in advance