Как показать / скрыть один результат для реакции Хука

Question

В настоящее время я изучаю, как использовать реагировать, и я застрял на практической проблеме, где мне нужно переключить кнопку, чтобы открыть и закрыть детали определенной c страны. У меня проблема в том, что всякий раз, когда я нажимаю кнопку, он включает переключатель для всего списка, таким образом, все распространяется. Следующий код - это то, к чему я обращаюсь:

// NOTE: only relevant codes are given

const DisplayInfo = ({countries}) => {

    // for button toggle
    const [showAll, setShowAll] = useState(false)

    ... irrelevant codes ...    

    else{ // # of countries are 1 < n < 10
            return(
                <div>
                    {countries.map( country => 
                    <div key={country.name}>
                        {country.name}
                        <button onClick={() => setShowAll(!showAll)}> show </button>
                        <div>
                            Test: is it on? {showAll ? 'yes' : 'no'}
                        </div>
                    </div>
                    )}

                </div>
            )
        }

... some more irrelevant codes...
}

Где у данного аргумента countries есть объект, содержащий название отфильтрованных стран и его информацию (например, прописные, разговорные языки и т. Д. c).

И есть следующий результат:

, где нажатие кнопки «показать» превратит все результат теста из да -> нет и наоборот, а не только выбирая один из них для изменения.

Любая помощь по этому вопросу приветствуется!