The "types" option does not seem to be having an effect in requestOptions

[abuzain432432]

I am setting the types to ['address'], but it seems that it has no effect on the suggestions. In the official docs, when I set the type to 'address' and try to search for addresses, I only get address suggestions, not just the country. However, as I am using this package, it is not working as intended.
Official Docs: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete#maps_places_autocomplete-typescript

'use client';
import React from 'react';
import usePlacesAutocomplete, {
  getGeocode,
  getLatLng,
} from 'use-places-autocomplete';
import { Input } from '@nextui-org/react';
import { useOutSideClick } from '@/hooks/useOutSideClick';
import { LocationSelectionType } from '@/types/index';
type Props = {
  // eslint-disable-next-line no-unused-vars
  onSelectLocation: (location: LocationSelectionType) => void;
  defaultValue?: string;
};
export default function PlacesSearch({
  onSelectLocation,
  defaultValue,
}: Props) {
  const inputRef = React.useRef<HTMLDivElement>(null);
  const {
    ready,
    value,
    suggestions: { status, data },
    setValue,
    clearSuggestions,
  } = usePlacesAutocomplete({
    callbackName: 'YOUR_CALLBACK_NAME',
    debounce: 300,
    requestOptions: { types: ['address'] },
  });

  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  const handleSelect =
    ({ description }: { description: string }) =>
    () => {
      // When the user selects a place, we can replace the keyword without request data from API by setting the second parameter to "false"
      setValue(description, false);
      clearSuggestions();
      getGeocode({ address: description }).then(results => {
        const { lat, lng } = getLatLng(results[0]);

        const bounds = results[0].geometry.viewport;
        const { lat: swLat, lng: swLng } = bounds.getSouthWest();
        const { lat: neLat, lng: neLng } = bounds.getNorthEast();

        onSelectLocation({
          lat,
          lng,
          ne: { lat: neLat(), lng: neLng() },
          sw: { lat: swLat(), lng: swLng() },
          placeId: results[0].place_id,
          address: description,
        });
      });
    };
  React.useEffect(() => {
    if (defaultValue) setValue(defaultValue, false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const renderSuggestions = () =>
    data.map(suggestion => {
      const {
        place_id,
        structured_formatting: { main_text, secondary_text },
      } = suggestion;
      return (
        <li
          className='py-1 px-2 cursor-pointer hover:bg-gray-50 border-b border-b-gray-300 '
          key={place_id}
          onClick={handleSelect(suggestion)}
        >
          <strong>{main_text}</strong> <small>{secondary_text}</small>
        </li>
      );
    });

  useOutSideClick({
    ref: inputRef,
    handler: () => {
      clearSuggestions();
    },
    enabled: status === 'OK',
  });

  return (
    <div ref={inputRef} className='relative w-full'>
      <Input
        value={value}
        onChange={handleInput}
        disabled={!ready}
        size='sm'
        placeholder='Type location here'
        classNames={{
          input: 'w-[85%]',
          inputWrapper: 'data-[hover=true]:bg-default-100 ',
        }}
      />
      <span
        onClick={() => {
          clearSuggestions();
          setValue('', false);
        }}
        className='absolute  top-0 right-2 cursor-pointer text-[13px] text-red-500 translate-y-[40%]'
      >
        Clear
      </span>
      {status === 'OK' && (
        <div className='absolute w-full top-0 z-10 translate-y-[50px]'>
          <div className='w-full py-3 shadow-lg bg-white rounded-lg text-charcoal overflow-y-auto scrollbar-hide h-[300px'>
            <ul className='px-2'>{renderSuggestions()}</ul>
          </div>
        </div>
      )}
    </div>
  );
}

[abuzain432432]

I have solved this problem by using another package which recommended by Google Map Docs.
@googlemaps/extended-component-library/react