navigator.geolocation.getCurrentPosition() is not getting a response from googleapi

I am using react to get geolocation on localhost:3000. I have seen another person get the geolocation coordinates on their localhost, but I am unable to do so even with allow location access enabled on Chrome.

I have tried using both the hooks and class syntax in react. I have enabled allow access. I eventually used an ip address api to get a general location, but since the geolocation is supposed to work(at least that is what I have been told) I would at least like to see it work so I can implement it with https in the future. The error log does not even get fired, whereas the first three logs are getting fired when the component is mounted. Here is the code I have tried, I have made it as simple as possible:

const App = props => {

  useEffect(() => {
    console.log('hello')
    console.log(navigator)
    console.log(navigator.geolocation)
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        console.log(position)
      }, (error) => {
       console.log(error)
      })
    } else {
      console.log('error')
    }
  }, [])
  return (
      <div>
        <h3>Please Login.</h3>
      </div>
    )
}

export default App

I expect to receive a response from googleapi.

Edit:

I added the error callback and it printed:

message: "Network location provider at 'https://www.googleapis.com/' : No response received."

add the optional error callback to handle the error (if user declines location permission)

navigator.geolocation.getCurrentPosition(success[, error[, [options]])

you are checking only if it is in navigator or not !!!

if user declines location permission then error callback will handle it...

possible options are (reference taken from mdn)

{
  enableHighAccuracy: true, 
  maximumAge        : 30000, 
  timeout           : 27000
}