How to get address and city ? about mui-places-autocomplete HOT 4 OPEN

  import MUIPlacesAutocomplete, { geocodeByPlaceID } from 'mui-places-autocomplete';

  function parseAddress(components: AddressComponent[]): Address {
    const result = {
        line1: ["", "", ""], // Make line1 an arry so we an arr.join(' ').trim() and not have to worry about fields being there or not
        suburb: "",
        city: "",
        county: "",
        country: "",
        postcode: "",
    };

    components.forEach((component) => {
        component.types.forEach((type) => {
            if (type === 'subpremise') {
                result.line1[0] = component.long_name;
            }
            if (type === 'street_number') {
                result.line1[1] = component.long_name;
            }
            if (type === 'route') {
                result.line1[2] = component.long_name;
            }
            if (['neighborhood', 'sublocality', 'sublocality_level_2'].includes(type)) {
                result.suburb = component.long_name;
            }
            if (['locality', 'postal_town', 'administrative_area_level_1'].includes(type)) {
                result.city = component.long_name;
            }
            if (type === 'administrative_area_level_2') {
                result.county = component.long_name;
            }
            if (type === 'country') {
                result.country = component.long_name;
            }

            if (['postal_code', 'postal_code_prefix'].includes(type)) {
                result.postcode = component.long_name;
            }
        });
    });

    return {
        line1: result.line1.join(' ').trim(),
        suburb: result.suburb,
        city: result.city,
        county: result.county,
        country: result.country,
        postcode: result.postcode,
    };
}


  const onSuggestionSelected = (suggestion: AddressSuggestion) => {
        geocodeByPlaceID(suggestion.place_id).then((results: GeoResults[]) => {
            const { geometry } = results[0];

            const coordinates = {
                lat: geometry.location.lat(),
                lng: geometry.location.lng(),
            };
            const parsedAddress = parseAddress(results[0].address_components);
            const selectedAddress = {
                placeId: suggestion.place_id,
                description: suggestion.description,
                address: parsedAddress,
                coordinates
            };
            console.log(selectedAddress);
 // From here, do what you want with `selectedAddress` - it has the address and lat lng.
//probably you want to set it as values on your input form:
//eg Formik: 
//        setFieldValue("address.line1", address.address.line1);
//        setFieldValue("address.line2", "");
//        setFieldValue("address.suburb", address.address.suburb);
//        setFieldValue("address.city", address.address.city);
//        setFieldValue("address.county", address.address.county);
//        setFieldValue("address.country", address.address.country);
//        setFieldValue("address.postcode", address.address.postcode);
//        setFieldValue("address.latitude", address.coordinates.lat);
//        setFieldValue("address.longitude", address.coordinates.lng);
        }).catch((err: any) => {
            console.log("Error retrieving location: ", err);
        });
    };

    return (
        <MUIPlacesAutocomplete
            onSuggestionSelected={onSuggestionSelected}
            renderTarget={() => (
                <div />
            )}
        />

    );