title: React Country Region Select
body: <p>I have some code about react-country-region-selector, which is suppose to allow me to select the countries and regions, but countries do not get selected and regions remains a dash. Can someone tell me what went wrong with my code?
  P.s I am using this site for my code, <a href="https://github.com/country-regions/react-country-region-selector" rel="nofollow noreferrer">https://github.com/country-regions/react-country-region-selector</a></p>
  <pre><code>import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';
  import React, { useState } from &quot;react&quot;;
  const Locations = () =&gt; {
      
    const [state, setState] = useState({
      country: &quot;&quot;,
      region: &quot;&quot;
    })
  
    const selectCountry = (val) =&gt; {
      setState({ state: val });
    }
  
    const selectRegion = (val) =&gt;{
     setState({ state: val });
    }
    const { country, region } = setState;
  
    return(
           &lt;div&gt;
   &lt;CountryDropdown
            value={country}
            onChange={(val) =&gt; selectCountry(val)} /&gt;
          &lt;RegionDropdown
            country={country}
            value={region}
            onChange={(val) =&gt; selectRegion(val)} /&gt;
           &lt;/div&gt;
  &lt;/div&gt;
  
  
  );
  }
  return default Locations;
  </code></pre>
  <p>What I currently have:</p>
  <p><a href="https://i.stack.imgur.com/Gz1h5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gz1h5.png" alt="enter image description here" /></a></p>
  <p>What I Need:
  <a href="https://i.stack.imgur.com/NCBr4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NCBr4.png" alt="enter image description here" /></a></p>