React Google Autocomplete Input

AutcompleteInput.tsx

import React, { useCallback, useEffect, useRef } from "react";

import useScript from "../hooks/useScript";

const AutocompleteInput = () => {
  // Load the Google Maps API script asynchronously
  const status = useScript(
    `https://maps.googleapis.com/maps/api/js?key=${
      import.meta.env.VITE_GOOGLE_MAPS_API_KEY
    }&libraries=places`
  );

  const inputRef = useRef<HTMLInputElement>(null);
  // Create a ref to hold the Google Maps autocomplete object
  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null);

  // Create an instance of the autocomplete object and store it in ref
  const createNewAutocomplete = useCallback(
    (inputRef: React.RefObject<HTMLInputElement>) => {
      if (!inputRef.current) return;
      const autocomplete = new google.maps.places.Autocomplete(
        inputRef.current,
        {
          types: ["(cities)"],
          componentRestrictions: { country: "us" },
        }
      );
      autocomplete.setFields(["geometry", "formatted_address"]);
      autocompleteRef.current = autocomplete;
    },
    []
  );

  // Whenever the status changes and the status of the script is set to ready,
  // create a new autocomplete object
  useEffect(() => {
    status === "ready" && createNewAutocomplete(inputRef);
  }, [status]);

  return <input ref={inputRef} />;
};

export default AutocompleteInput;