React google maps api autocomplete issue with selection via arrow keys

Question

In React, I have an issue using autocomplete from the google maps api where selecting a location via up/down arrow keys in the dropdown menu followed by enter does not seem to select the location. Instead, what gets captured and searched is only what is typed. For instance if I type in "civ", then down arrow and hit enter on the option "Civic Center, San Francisco, CA 94102, USA" in the dropdown menu, the value that is captured and searched is just "civ". The examples I see on Google's site suggest it is possible to use the arrow keys + enter to select a place so I am not quite sure what I am doing wrong that prevents this behavior.

I have tried adding searching directly to initializeAutocomplete, exploring if theres ways to do place = autocomplete.getPlace() on key down for arrow keys, and some other or non-optimal strategies (e.g. delaying the enter keydown event if theres some race conditions at play), but nothing has worked. Maybe I'm using autocomplete wrong?

Below is a basic version of my code with the parts that interact with the search input and autocomplete.

function App() {
  const [captchaVerified, setCaptchaVerified] = useState(false);
  const onCaptchaChange = (value) => {
    setCaptchaVerified(!!value);
  };

  const autocompleteInputRef = useRef(null);
  const loadGooglePlacesScript = () => {
    if (window.google) {
      initializeAutocomplete();
      return;
    }
    const script = document.createElement("script");
    script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places`;
    script.onload = () => initializeAutocomplete();
    document.body.appendChild(script);
  };
  const initializeAutocomplete = () => {
    if (!autocompleteInputRef.current || !window.google) return;
    const autocomplete = new window.google.maps.places.Autocomplete(
      autocompleteInputRef.current,
    );
    autocomplete.addListener("place_changed", () => {
      const place = autocomplete.getPlace();
      const address = place.formatted_address || place.name;
      setLocation(address);
    });
  };

  const [isSearching, setIsSearching] = useState(false);
  const [location, setLocation] = useState("");
  const [searchedLocation, setSearchedLocation] = useState("");

  const searchLocationWithVerification = async () => {
    if (!captchaVerified) {
      alert("captcha not verified.");
      return;
    }
    searchLocation();
  };

  const searchLocation = async () => {
    try {
      if (location !== searchedLocation) {
        setIsSearching(true);
        ### STUFF FOR GETTING DATA ###
        setSearchedLocation(location);
        setIsSearching(false);
    } catch (e) {
      setIsSearching(false);
      console.error(e);

  useEffect(() => {
    loadGooglePlacesScript();
  }, []);

  return (
    <div className="App">
      <div className="search-bar-launch-container">
        <div className="input-container">
          <input
            ref={autocompleteInputRef}
            value={location}
            onChange={e => setLocation(e.target.value)}
            onKeyDown={e => {
              if (e.key === "Enter" && location.trim()) {
                searchLocationWithVerification();
              }
            }}
            placeholder="Enter address or coordinates"
            className="input"
          />
        </div>
        <div className="captcha-container">
          <ReCAPTCHA
            sitekey={process.env.REACT_APP_GOOGLE_CAPTCHA_KEY}
            onChange={onCaptchaChange}
          />
        </div>
      </div>
    </div>
  )