Call from main value in openweathermap doesn´t work

Question

I am trying to call a main value from the openweathermap API, but I get an error. I tried every thing I could, but I can't figure it out. Can anybody solve this problem?

Here's my code:

import React from 'react'
import { useEffect, useState } from 'react';

function CurrentWeather() {
    const [apiData, setApiData] = useState({});

    const ApiKey = "..........................";
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=Albufeira&units=metric&lang=nl&appid=${ApiKey}`;

    useEffect(() => {
        fetch(apiUrl)
            .then((res) => res.json())
            .then((data) => setApiData(data));
    }, [apiUrl]);

    console.log(apiData);
    console.log(apiData.main);

    return (
        <div>
            <div className="pt-10 text-white">
                <p className="">{apiData.name}</p>
                <p>{apiData.main.temp}</p>
            </div >
        </div >
    )
}

export default CurrentWeather

When I add this line of code:

<p>{apiData.main.temp}</p>

and hit ctrl S is goes alright, but when I hit the refresh button I get this error: Error

Thanks for the help!