React Hook for Google Address Autocomplete

Example.js

import React, { useRef } from 'react';
import useAutoCompleteAddress from '../_generic/useAutoCompleteAddress';

const Example = () => {
  const ref = useRef();
  const { addressComponents } = useAutoCompleteAddress(ref);

  return (
    <>
      <input type="text" ref={ref} />
    </>
  );
};

export default Example;

useAutoCompleteAddress.js

import { useEffect, useState } from 'react';

export default function useAutoCompleteAddress(ref, options = {}) {
  const API_KEY = '___APIKEY___';
  const country = 'ca'

  let autocomplete;
  const [addressComponents, setAddressComponents] = useState({});

  useEffect(() => {
    const onLoad = () => {
      autocomplete = new window.google.maps.places.Autocomplete(ref.current, { componentRestrictions: { country: country }, ...options });
      autocomplete.addListener('place_changed', fillInAddress);
    };

    if (!window.google) {
      const script = document.createElement(`script`);
      script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;
      document.head.append(script);
      script.addEventListener(`load`, onLoad);
      return () => script.removeEventListener(`load`, onLoad);
    } else onLoad();
  }, []);

  const fillInAddress = () => {
    const place = autocomplete.getPlace();
    console.log(place, place);

    const formattedAddress = place.formatted_address;
    const addressComponents = {};
    addressComponents['address'] = place.formatted_address;

    for (let i = 0; i < place.address_components.length; i++) {
      const addressType = place.address_components[i].types[0];
      if (addressType === 'street_number') {
        addressComponents['street_number'] = place.address_components[i]['long_name'];
      } else if (addressType === 'route') {
        addressComponents['street_name'] = place.address_components[i]['short_name'];
      } else if (addressType === 'administrative_area_level_1') {
        addressComponents['province'] = place.address_components[i]['short_name'];
      } else if (addressType === 'postal_code') {
        addressComponents['postal_code'] = place.address_components[i]['short_name'];
      }

      if (addressType === 'locality' && formattedAddress.indexOf(place.address_components[i]['long_name']) > -1) {
        addressComponents['city'] = place.address_components[i]['long_name'];
      } else if (addressType === 'sublocality_level_1' && formattedAddress.indexOf(place.address_components[i]['long_name']) > -1) {
        addressComponents['city'] = place.address_components[i]['long_name'];
      } else if (addressType === 'sublocality_level_2' && formattedAddress.indexOf(place.address_components[i]['long_name']) > -1) {
        addressComponents['city'] = place.address_components[i]['long_name'];
      }
    }
    addressComponents['longitude'] = place.geometry.location.lat();
    addressComponents['latitude'] = place.geometry.location.lng();

    setAddressComponents(addressComponents);
  };

  return { addressComponents };
}