I have this autocomplete snippet code that when the user clicks on the autocomplete suggestion (which is the first input field) the other fields will have its value added based on the place variable. I do not know why it returns as undefined though. Any guidance would be helpful. Thank you.

let autocomplete;
let placeSearch;
let componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_2: 'long_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initAutocomplete(){
  if ( jQuery( '#autocomplete-streetNumber' ).length ) {
    autocomplete = new google.maps.places.Autocomplete(
      document.getElementById( 'autocomplete-streetNumber' ),
      {
        types: ['address'],
        componentRestrictions: {'country':['AU']},
        fields: ["address_components"] }
    );
    autocomplete.addListener( 'place_changed', fillInAddress );
  }
};

function fillInAddress() {

  // Get the place details from the autocomplete object.
  let place = autocomplete.getPlace();

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  document.getElementById('autocomplete-streetNumber').value = place.address_components.street_number;
  document.getElementById('streetName').value = place.address_components.route;
  document.getElementById('suburb').value = place.address_components.locality;
  document.getElementById('postCode').value = place.address_components.postal_Code;
}