Using Angular and Google Maps API

Description of Flow:
Ok so I’m using Google Places Api to get the list of places suggestions (the list which is populated when a user types some words in it).
So when the user selects a place from the list, an event of places_changed is emitted. Then upon that, I’m getting the details of that place in the same function defined below.

The Problem:
The time that the list takes to populate is very less and it is quick but when the user selects a place from the list, it takes way too long to receive the details of that place.
have searched quite a lot but have failed to find anything useful

loadAutoComplete() {
    const input = document.getElementById(
      'geoLocationField'
    ) as HTMLInputElement;
    const autoComplete = new google.maps.places.SearchBox(input);
    console.log('button presed');
    autoComplete.addListener('places_changed', () => {
      console.log('places_changed event emmitted');
      const places = autoComplete.getPlaces();
      console.log(places);

      this.addressList = places;
      this.showAddressPopup.next(true);

      this.selectedFormattedAddress = places[0].formatted_address!;

      if (this.addressList) {
        if (this.addressList.length) {
          return;
        }

        this.address = places[0].formatted_address;
        this.latitude = places[0].geometry?.location?.lat();
        this.longitude = places[0].geometry?.location?.lng();

        this.disableFields();
      }
    });
  }

Have tried to diagnose the issue but no luck. Can’t find the actual cause of it.