如何解决React错误'无法读取未定义的属性

所以，在我的代码中，setData看起来工作正常，并将获取的数据给我的状态。然而，它并不工作在拳头渲染。但是如果我修改了代码中的一些内容，网站就会再次被渲染，国家名称就会按照我的要求显示在屏幕上。

但这个错误一直出现。未发现的类型错误。不能读取未定义的属性（读取'common'）。

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Country() {
  const { countryName } = useParams();
  const [data, setData] = useState([]);
  const [country, setCountry] = useState({});

  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all')
      .then(resp => resp.json())
      .then(datas => setData(datas));
  }, [])

  useEffect(() => {
    setCountry(data.find(a => a.name.common.toLowerCase() == countryName.replaceAll("-", " ")));
  }, [data])

  return (
    <>
      {
        <h1>{country.name.common}</h1>
      }
    </>
  )
}

export default Country

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>