I'm using Material UI v4 Autocomplete component to build a React Js app.
I'm using the controlled Autocomplete component combined with the use-places-autocomplete library to show the place suggestions.
The is no user input at the first condition. So there is no suggestion from the Autocomplete component as seen in the image below.
If the user inputs a place name such as "new york", there will be some suggestions shown in the Autocomplete component and there are some suggestions in the browser console as seen in the screenshot below.
If the user inputs a specific name such as "jmto" (a company name), there will be no suggestion shown in the Autocomplete component but there are some suggestions in the browser console as seen in the screenshot below.
But the example from the use-places-autocomplete library here https://codesandbox.io/s/useplacesautocomplete-x-reach-ui-lik2c shows that a name like "jmto" would produce suggestions as seen in the image below.
So what's wrong with my code (why some names like "jmto" wouldn't show suggestions for the Autocomplete component)?
Here is the full code: https://codesandbox.io/s/autocomplete-material-ui-huvy7
Note: in order to run the codesandbox above, please provide your Google Maps API key.
You can obtain it here https://developers.google.com/maps/documentation/places/web-service/get-api-key