How to get API data from the useEffect and use a specific one based on the Pokemon I click

Question

I am trying to Onclick on pokemon img to get that specific pokemon and navigate it to another page. In React Btw

This is where I list all the pokemons Example.jsx

useEffect(() => {
    const PokeArr = async () => {
        try {
            const res = await axios.get("https://pokeapi.co/api/v2/pokemon?limit=40");
            const allPoke = res.data.results;
            setKantoPokemon(allPoke);
        } catch (error) {
            console.error(error + " This is the error");
        }
    };

    PokeArr(); 
}, []);

This is my attempt of the function

const ClickPoke =  async() => {
        try{
            const gettinPoke = (async(pokemon) => {

             
            const res = await fetch (pokemon.url);
                const data = res.json()
                setclickpokedata(data)
                navigate("./Clicked", {state: {clickpokedata: res.data} });
                console.log(gettinPoke)
            }) 
        } catch{
            console.error(error + "That Was the error")
        }
          
};

I've tried this function above but if anyone could explain what I am doing wrong so I can get something out of this?