Tengo este componente de la aplicación. En la parte inferior del código, tenga un enlace a un componente CountryDetail. El problema es que me da error cuando hago clic en el enlace.

 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;

¿Qué estoy haciendo mal? El componente CountryDetailed me parece bien. Por otro lado, aquí está el error de la consola:

Si consolo log the props, devuelve el objeto, pero cuando quiero renderizar algunos de los props de ese objeto, falla...

¿Algún consejo para este tema?