Всем привет скажите пожалуйста, почему у меня выпадает ошибка ?

const App = () => {
const [data, setData] = useState<DataResponce[]>([]);
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
const responce = async () => {
setLoading(true);
try {
const res = await axios.get<IResponce>(
"https://fcsapi.com/api-v3/forex/candle?id=1&period=15m&access_key=****"
);
setData(res.data.response);
} catch (error) {
console.log(error);
}
setLoading(false);
};
responce();
}, []);
console.log(data);
return (
<div className={classes.app}>
<img src={back} alt="back" />
{loading ? (
<h1>Loading...</h1>
) : (
<div className={classes.block}>
<div className={classes.header}>
<span className={classes.price}>EUR/USD Price Chart</span>
<span className={classes.data}>
{new Date().getDate() + " " + new Date().getMonth()}
</span>
</div>
<div className={classes.main}>
<div className={classes.graf}></div>
<div className={classes.velues}>
<div className={classes.value}>
<p>Open/Close</p>
<span>{data[0].o}</span>
<span>{data[0].c}</span>
</div>
<div className={classes.value}>
<p>High/Low</p>
<span>{data[0].h}</span>
<span>{data[0].l}</span>
</div>
<div className={classes.value}>
<p>Change/Amplitude</p>
<span>{data[0].ch}</span>
<span>{data[0].cp}</span>
</div>
</div>
</div>
<div className={classes.footer}>
<span>Time</span>
<span>15m</span>
<span>1H</span>
<span>4H</span>
<span>1D</span>
<span>1W</span>
</div>
</div>
)}
</div>
);
};

поля o нет

я вижу что он не видит его, но оно есть рендерится раньше чем делается запрос и я не понимаю почему так

Если его нет – значит его нет

ну может не рендерить раньше чем запрос?

для этого я в сделал условие рендера лоадера

на наличие поля сделай