It's HomePage component of 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>
      </>
   );
 };

It's second components Details

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

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

HomePage itself looks like this but when i click on flag/card it sends me on second page as expected but gives me this error [https://i.stack.imgur.com/JqEHm.png][after]

also i'm using react-router-domV6 and this API https://restcountries.com/v2/all also both Components are in