Es el componente HomePage de react js

 import React from 'react'; import axios from 'axios'; import { useState, useEffect } from 'react'; import { useNavigate,useParams } from 'react-router-dom'; import { Main } from '../components/Main'; import { Controls } from '../components/Controls'; import { ALL_COUNTRIES } from '../config'; import { List } from '../components/List'; import { Card } from '../components/Card'; import { Details } from './Details'; export const HomePage = () => { const [countries,setCountries] = useState([]); const navigate = useNavigate(); useEffect(() => { axios.get(ALL_COUNTRIES).then(({data})=>setCountries(data)) },[]); return ( <> <Controls/> <List> { countries.map((c)=> { const countryInfo={ img:c.flags.png, name:c.name, info: [ { title:'Population', description:c.population.toLocaleString(), }, { title:'Region', description:c.region, }, { title:'Flag', description:c.capital, }, ], }; return <Card key={c.name} onClick={(e)=>{navigate('/country/${c.name}')}} {...countryInfo}/> }) } </List> </> ); };

Sus segundos componentes Detalles

 export const Details = ({match}) => { return ( <div> Details {match.param.name} <div/> ); };

[https://i.stack.imgur.com/KUyrA.png][antes]

La página de inicio en sí se ve así, pero cuando hago clic en la bandera/tarjeta, me envía a la segunda página como se esperaba, pero me da este error [https://i.stack.imgur.com/JqEHm.png] [después]

también estoy usando react-router-domV6 y esta API https://restcountries.com/v2/all también ambos componentes están en