I have this APP component. At the bottom of the code, have a Link to a CountryDetail component. The problem is that I get error when I click on the link.

function App() {
  const [input, setInput] = useState("");
  const [countries, setCountries] = useState([]);
  const [search, setSearch] = useState([]);
  const [status, setStatus] = useState("All");
  const [filteredCountries, setFilteredCountries] = useState([]);



   function onFilter(name) {
    let country = countries.filter((c) => c.name);
    if (countries.length > 0) {
      return country[0];
    } else {
      return null;
    }
  }  

  return (
    <div className="App">
      <header className="App-header"></header>
      <Router>
        <Route path="/" component={Navbar} />

        <Form
          onSearch={onSearch}
          setInput={setInput}
          setSearch={setSearch}
          input={input}
          setStatus={setStatus}
        />

        <AllCountries
          countries={countries}
          search={search}
          filteredCountries={filteredCountries}
        />
        <Route
          exact
          path="/country/:name"
          render={({ match }) => (
            <CountryDetail props={onFilter(match.params.name)} />
          )}
        />
      </Router>
    </div>
  );
}

export default App;


Here is the CountryDetail component:

function CountryDetail({ props }) {
  console.log(props);
  return (
    <div className="details">
      <div className="info">
        <img src={props.flag} className="flags"></img>
        <ul>Name:{props.name}</ul>
        <ul>Native Name: {props.nativeName}</ul>
        <ul>Population:{props.population}</ul>
        <ul>Region:{props.region}</ul>
        <ul>Sub-Region:{props.subregion}</ul>
        <ul>Capital:{props.capital}</ul>
        <ul>Top Level Domain:{props.topLevelDomain}</ul>
        <ul>Currencies:{props.currencies}</ul>
        <ul>Language:{props.language}</ul>
      </div>
    </div>
  );
}

export default CountryDetail;

What Im doing wrong? The CountryDetailed component seems OK for me. On the other hand, here is the console error:

If I consolo log the props, it returns the object, but when I want to render some of the props of that object, it fails...

Any advise for this topic?