我正在尝试制作一个显示 Covid 19 数字的应用程序。我想在呈现组件时显示全局数字，因此我为此使用了 useEffect 钩子。当我尝试显示 global.confirmed 时，它会返回一个对象，但是当我尝试显示 global.confirmed.value 时，我收到 无法读取未定义的属性“值” 错误。我该如何解决这个问题？

import React from "react";
import "./App.css";
import axios from "axios";
import { useState, useEffect } from "react";
import "./App.css";

const App = () => {
  const [countries, SetCountries] = useState([]);
  const [cases, SetCases] = useState([]);
  const [global, SetGlobal] = useState({});

  const urlGlobal = "https://covid19.mathdro.id/api/"
  const urlCountries = "https://covid19.mathdro.id/api/countries/";

  useEffect(() => {
    axios.get(urlGlobal).then(res => SetGlobal(res.data))
    axios.get(urlCountries).then((res) => SetCountries(res.data.countries));
  }, []);

  const showCases = (e) => {
    const urlCases = `https://covid19.mathdro.id/api/countries/${e.target.value}`;
    axios.get(urlCases).then((res) => SetCases(res.data));
  };


  return (
    <div>
      <div>
        <p>Infected</p>
        <p>{cases.confirmed.value}</p>
        <p>{cases.lastUpdate}</p>
        <p>Number of active cases of COVID-19</p>
      </div>
      <div>
        <p>Recovered</p>
        <p>{cases.recovered.value}</p>
        <p>{cases.lastUpdate}</p>
        <p>Number of recoveries from COVID-19</p>
      </div>
      <div>
        <p>Deaths</p>
        <p>{cases.deaths.value}</p>
        <p>{cases.lastUpdate}</p>
        <p>Number of deaths caused by COVID-19</p>
      </div>
      <select name="countries" onChange={(e) => showCases(e)}>
        {countries.map((val, i) => (
          <option key={i} value={val.name}>
            {val.name}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

全局：