React Hooks 很奇怪

import './App.css';
import { MenuItem, FormControl, Select, Card, CardContent } from "@material-ui/core";

function App() {
  const [countries, setCountries] = useState([]);
  const [country, setCountry] =useState("WorldWide");

  useEffect(() => {
    const getCountriesData = async () => {
      await fetch("https://disease.sh/v3/covid-19/countries").then(response => response.json()).then(data => {
        const countries = data.map(country => ({
          name: country.country,
          value: country.countryInfo.iso2
        }));
        setCountries(countries);
      });
    };
    getCountriesData();
  }, []);

  const onCountryChange = (event) => {
    const countryCode = event.target.value;
    setCountry(countryCode);
  }

  return (
    <div className="app">
      <div className="app__header">
        <h1>Covid-19 Tracker</h1>
        <FormControl className="app__dropdown">
          <Select
            variant="outlined"
            onChange={onCountryChange}
            value={country}
          >
            <MenuItem value="WorldWide">WorldWide</MenuItem>
            {countries.map(country => (<MenuItem value={country.value}>{country.name}</MenuItem>))}

          </Select>

        </FormControl>
      </div>
      {/* Title + Select input dropdown */}

      {/* InfoBoxes */}
      {/* InfoBoxes */}
      {/* InfoBoxes */}

      {/* Table */}
      {/* Graph */}
      {/* Map */}
    </div>
  );
}

export default App;

在上面的代码中，我使用的country是我正在更新的状态，setCountry具体取决于用户从选择下拉选项中选择的内容。我正在学习教程，但是onCountryChange()当我setCountry(countryCode)显示所选国家/地区的名称时，我不明白的是功能中的内容。每件事都有效，但如何？由于countryCode设置为event.target.value并且value只不过是特定国家/地区的两个字符代码。那么当我传递的只是国家代码（只有两个字母）时，如何将国家/地区名称setCountry设置country为整个国家/地区。