Как исправить код чтобы появлялась дополнительная карточка только той страны по которой был клик?

Когда кликаю по строке одной страны появляются дополнительные карточки для всего списка стран. 
Как сделать так чтобы открывалась дополнительная карточка только той страны по которой был 
клик?
```
const Countries = ({data}) => {
/*const countries = useCountry();*/
const [showCard, setShowCard] = useState('none');

const currentView = {
    display: showCard
}

const ShowOnClick = () =>{
    let display = 'flex'
    setShowCard(display)
} 
    
  

if(!data){
    return(
        <h1>Loading...</h1>
    )
}

return (
<table>
    <thead>
        <tr>
            <th>№</th>
            <th>Country</th>
            <th>Total Confirmed</th>
        </tr>
    </thead>
    <tbody>
        {data.map((country, index) => (
            <>
            <tr onClick={ShowOnClick} key={index}>
                <td>{index + 1}</td>
                <td>{country.Country}</td>
                <td>{country.TotalConfirmed}</td>
                {/*<td className="deaths">{country.TotalDeaths}</td>
                <td>{country.TotalRecovered}</td>*/}
            </tr>
             <div  className="card" style={currentView}>
                <h4>{country.Country}</h4>
            </div>
            </>
        ))}
    </tbody>
</table>
)
};
```