title: TypeError: (intermediate value).map is not a function when using set for Country Api
body: <p>I am building a React app that is requesting data from an an Api.  Now as part of the application I want to filter by Regions of the Api.  Now I realise that I need to use Sets to extract just the regions.   Below is the code that I have so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { CountryList } from './Components/Card-List/CountryList';
  import { SearchBox } from './Components/Search-box/Search-Box';
  import { NavBarCard }from './Components/NavBar/NavBarCard';
  import './Countries.styles.css';
  
  
  class Countries extends Component {
  constructor() {
      super();
      this.state = {
          countries:[],
          searchField:"",
          regionField:"",
          darkMode: false
      }
      this.setDarkMode = this.setDarkMode.bind(this);
      this.handleRegion = this.handleRegion.bind(this);
  };
  
  
  componentDidMount() {
      fetch("https://restcountries.eu/rest/v2/all")
      .then(response =&gt; response.json())
      .then(all =&gt;  this.setState({ countries: all,
          regions: all}))
  }
  
  
  setDarkMode(e){
      this.setState((prevState) =&gt; ({ darkMode: !prevState.darkMode }));
  }
  
  handleRegion(e){
      this.setState({regionField: e.target.value})
  }
  render() {
      const { countries, searchField, regionField, darkMode } = this.state;
      const filterCountries = countries.filter((country) =&gt; country.name.toLowerCase().includes(searchField.toLowerCase()) &amp;&amp;
       country.region.toLowerCase().includes(regionField.toLowerCase()));
  
       return(
  
  
              &lt;div className={darkMode ? "dark-mode" : "light-mode" }&gt;
  
                   &lt;NavBarCard handlechange={this.setDarkMode} moonMode={darkMode ? "moon fas fa-moon" : "moon far fa-moon"} darkMode={darkMode ? "dark-mode" : "light-mode"}/&gt;
  
  
                  &lt;div className="Input"&gt;
  
                      &lt; SearchBox type="search" placeholder="Search a Country" handlechange={e=&gt; this.setState({
                          searchField: e.target.value })}
                          /&gt;
  
  
                          &lt;select onChange={this.handleRegion} value={regionField}&gt;
                              {new Set(countries.map(country=&gt;country.region))
                              .map(uniqueRegion =&gt; 
                              &lt;option&gt;{uniqueRegion}&lt;/option&gt;)}
                          &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;CountryList countries={filterCountries} /&gt;
  
              &lt;/div&gt;
  
           )
         }
       }
  
     export default Countries;
  </code></pre>
  
  <p>The error I am getting is <code>TypeError: (intermediate value).map is not a function</code> for the Select tag. Not sure what I missed. Any help would be appreciated.</p>