Spinner is not working with ternary operator

import React, { useEffect, useState } from 'react';
import { Spinner } from 'react-bootstrap';
import Country from '../Country/Country'

const Countries = () => {
    const[countries,setCountries]=useState([])
    const [isLoading,setLoading]=useState(true)
    useEffect(()=>{
        fetch('https://restcountries.com/v3.1/all')
           .then(res=>res.json())
           .then(data=>setCountries(data))
        setLoading(false)

    },[])
    return (
        <div className='container'>
            <div className="row row-cols-lg-4 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-3">
                {
                    isLoading?<Spinner animation='border'/>:countries.map(country=><Country key={Math.random(1,10)} country={country} />)
                }

            </div>
        </div>
    );
};

export default Countries;

Spinner is working Outside { }.But when I am trying this->

{isLoading?<Spinner animation='border'/>:countries.map(country=><Country key={Math.random(1,10)} country={country} />)}.

It is not working.I want to say It did not show any spinner before data showing