React.js Показать компонент с событием onClick

Я новичок в React и создаю простое приложение React, которое отображает на экране все страны мира и небольшую панель поиска, которая показывает данные искомой страны.

Здесь изображение сайта

Но я не знаю, как показать страну, которую вы хотите щелкнуть, на полосе прокрутки.

Вот код app.js:

import React, { Component } from 'react';
import './App.css';
import NavBar from '../Components/NavBar';
import SideBar from './SideBar';
import CountryList from '../Components/SideBarComponents/CountryList';
import Scroll from '../Components/SideBarComponents/Scroll';
import Main from './Main';
import SearchCountry from '../Components/MainComponents/SearchCountry';
import SearchedCountry from '../Components/MainComponents/SearchedCountry';
import Datas from '../Components/MainComponents/Datas';

class App extends Component {

  constructor() {
    super();
    this.state = {
      nations: [],
      searchField: '',
      button: false
    }
  }

  onSearchChange = (event) => {
    this.setState({searchField: event.target.value});
    console.log(this.state.searchField)
  }

  onClickChange = () => {
    this.setState(prevsState => ({
      button: true
    }))
  }

  render() {

    const {nations, searchField, button, searchMemory} = this.state;

    const searchedNation = nations.filter(nation => {
      if(button) {
        return nation.name.toLowerCase().includes(searchField.toLowerCase())
      }
    });

    return (
      <div>
        <div>
          <NavBar/>
        </div>
          <Main>
            <div className='backgr-img'>
              <SearchCountry searchChange={this.onSearchChange} clickChange={this.onClickChange}/>
              <SearchedCountry nations={searchedNation}/>
            </div>
             <Datas nations={searchedNation}/>
          </Main>
          <SideBar>
            <Scroll className='scroll'>
              <CountryList nations={nations} clickFunc/>
            </Scroll>
          </SideBar>
      </div>
    );
  }

  componentDidMount() {
     fetch('https://restcountries.eu/rest/v2/all')
    .then(response => response.json())
    .then(x => this.setState({nations: x}));
  }

  componentDidUpdate() {
    this.state.button = false;
  }

}

export default App;

Список стран:

import React from 'react';
import Images from './Images';

const CountryList = ({nations, clickFunc}) => {
    return (
        <div className='container' style={{display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(115px, 3fr))'}}>
            {
                nations.map((country, i) => {
                    return (
                        <Images 
                        key={country.numericCode}
                        name={country.name}
                        flag={country.flag}
                        clickChange={clickFunc}
                        />
                    );
                })
            }
        </div>
    )                   
}
export default CountryList;

И images.js:

import React from 'react';
import './images.css'

const Images = ({name, capital, region, population, flag, numericCode, clickChange}) => {
    return (
        <div className='hover bg-navy pa2 ma1 tc w10' onClick={clickChange = () => name}>
            <img alt='flag' src={flag} />
            <div>
                <h6 className='ma0 white'>{name}</h6>
                {capital}
                {region}
                {population}
                {numericCode}
            </div>
        </div>
    );
}

export default Images;

Я подумал об использовании события onClick для одной нации, которая должна была вернуть название выбранной нации. После этого я бы ввел имя в searchField и установил для кнопки значение true, чтобы запустить функцию searchedNation. Я благодарю всех, кто даст мне ответ заранее.