title: React Location returns undefined
body: <p>I'm trying to get the user location for a weather app but the log return undefined</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  const [lat, setLat] = useState();
    const [long, setLong] = useState();
  
    useEffect(() =&gt; {
      const handleLocation = () =&gt; {
        navigator.geolocation.getCurrentPosition((position) =&gt; {
          setLat(position.coords.latitude);
          setLong(position.coords.longitude);
        });
  
        console.log(lat);
        console.log(long);
      };
  
      if (navigator.geolocation) {
        navigator.permissions.query({ name: 'geolocation' }).then(function (result) {
          if (result.state === 'granted') {
            console.log(result.state);
            handleLocation();
          } else if (result.state === 'prompt') {
            console.log('prompt');
          } else if (result.state === 'denied') {
            console.log('Denied');
          }
        });
      }
    }, [lat, long]);</code></pre>
  </div>
  </div>
  </p>
  <p>I get the log granted confirming that the browser granted the location but then I get undefined for the lat and long</p>