Button handler to show preview

Iam doing one of the react assignment and I am stuck on the last part of this assignment. The question is like this: Improve on the application in the previous exercise, such that when the names of multiple countries are shown on the page there is a button next to the name of the country, which when pressed shows the view for that country. Here is my code. I tried some functions but couldnot get it so I wonder if someone can help me to cope with this last part..Thank you

import React, { useState, useEffect } from "react";
import axios from "axios";
import ReactDOM from "react-dom";

const App = () => {
  const [countries, setCountries] = useState([]);
  const [filter, setFilter] = useState("");
  const [select, setSelected] = useState([]);
  //console.log(countries);
  
    useEffect(() => {
    axios.get("https://restcountries.eu/rest/v2/all").then((response) => {
      setCountries(response.data);
    });
  }, []);

  const searchHandler = (e) => {
    setFilter(e.target.value);
    //console.log(filter);
    const selected_countries = countries.filter((item) => {
      const letter_case=item.name.toLowerCase().includes(filter.toLowerCase())
        return letter_case
    });

    setSelected(selected_countries);
  };

    const countryLanguages = (languages)=>
    languages.map(language => <li key={language.name}>{language.name}</li>)


  const showCountries = () => {
    if (select.length === 0) {
      return <div></div>

    } else if (select.length > 10) {
      return "Find the specific filter";
    }

     else if(select.length>1 && select.length<10){
       return (select.map(country=>
       <div key={country.alpha3code}>{country.name}
          <button>Show</button>//this part
        </div>)
      )
      
    }
    else if(select.length===1){
      return(
        <div>
          <h1>{select[0].name}</h1>
          <div>capital {select[0].capital}</div>
          <div>population {select[0].population}</div>
          <h2>languages</h2>
         <ul>{countryLanguages(select[0].languages)}</ul>
          <img src={select[0].flag} width="100px"/>
          <h2>Weather in {select[0].capital}</h2>
        </div>
      )
    } 
  };

  return (
    <div>
      <h1>Countries</h1>
      find countries: <input value={filter} onChange={searchHandler} />
      {showCountries()}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));