React array not Updating after 1st click

Question

I am rendering and selecting a few cards in a component and adding them to an array using a context hook. 1st click is not connecting at all and accessing the context array by calling another component is returning empty value. Someone help a little. please

`import React, { useContext, useState } from 'react';
import { Link, useLoaderData } from 'react-router-dom';
import { CountryContext } from '../../../Context/CountryContext';


import Country from './Country';



const Countries = () => {
const allCountries = useLoaderData()
// const [selectedCountries, setSelectedCountries] = useState([]);
const [showAll, setShowAll] = useState(false);
const { selectedCountries, setSelectedCountries } = useContext(CountryContext)

// const handleCountryClick = (country) => {
//     const name = country.name.common;
//     console.log(name);
//     setSelectedCountries(prevCountries => {
//         if (prevCountries && prevCountries.includes(name)) {
//             return prevCountries.filter(c => c !== name);
//         } else {
//             return prevCountries ? [...prevCountries, name] : [name];
//         }
//     });
//     console.log(selectedCountries)
// };


// const handleCountryClick = (country) => {
//     const name = country.name.common;
//     console.log(name);
//     if (selectedCountries && selectedCountries.includes(name)) {
//         setSelectedCountries(selectedCountries.filter(c => c !== name));
//     } else {
//         console.log(selectedCountries);
//         setSelectedCountries(selectedCountries ? [...selectedCountries, name] : [name]);
//         // setSelectedCountries([...selectedCountries, name]);
//         console.log(selectedCountries);
//     }
// };

const handleCountryClick = (country) => {
    const name = country.name.common;
    console.log(name);
    if (selectedCountries.includes(name)) {
        setSelectedCountries(selectedCountries.filter(c => c !== name));
    } else {
        setSelectedCountries([...selectedCountries, name]);
        console.log(selectedCountries);
    }
};

const specificCountries = [
    "Canada",
    "Australia",
    "Germany",
    "United States",
    "United Kingdom",
    "New Zealand"
];

const filteredCountries = allCountries.filter(
    country => specificCountries.includes(country.name.common)
);

return (
    <div className='text-center mt-10 mx-auto w-[784px]'>
        <h1 className='text-5xl my-12'>Which Country Do you want to go?</h1>
        <div className='grid grid-cols-3  gap-8 items-center justify-center align-middle justify-items-center   
'>
            {
                showAll
                    ? allCountries.map(country => (
                        <Country
                            key={country.ccn3}
                            country={country}
                            selected={selectedCountries.includes(country)}
                            onClick={() => handleCountryClick(country)}
                        ></Country>
                    )) :
                    filteredCountries.map(country => (
                        <Country
                            key={country.ccn3}
                            country={country}
                            selected={selectedCountries.includes(country)}
                            onClick={() => handleCountryClick(country)}
                        ></Country>
                    ))
                //   allCountries.slice(0, showAll ? allCountries.length : 6).map(country => <Country>
  </Country>)
            }
        </div>
        <button
            className='btn btn-primary my-16'
            onClick={() => setShowAll(!showAll)}
        >
            {showAll ? "Show Less" : "Show All"}
        </button>
        <button className='btn btn-primary my-16'><Link>Continu</Link></button>
    </div>


);

};


export default Countries;`

console sog see click event work but not updated the array