React-google-places-autocomplete street_address component not working?

Question

I'm trying to split my autocomplete address into it's individual components to autofill an address form. I can get most of the address components to work, but when I get to the "Street_address" part, it doesn't work. I've copy and pasted the parameter name from Google's own documentation, but when I run the code, I get "Undefined". Here's the component structure:

<GooglePlacesAutocomplete
                    apiKey={process.env.REACT_APP_PLACES_ID}
                    apiOptions={{ language: 'en', region: 'en' }}
                    selectProps={{
                        onChange: async (value) => {
                            setLocation(value)
                            const address = value?.label || ''

                            if (address) {
                                let place = await geocodeByAddress(address)
                                const { lat, lng } = await getLatLng(place[0])

                                let address_components = {}
                                for (var i = 0; i < place[0].address_components.length; i++) {
                                    var addressType = place[0].address_components[i].types[0]
                                    switch (addressType) {
                                        case 'postal_code':
                                            address_components.postal_code = place[0].address_components[i].short_name
                                            break
                                        case 'street_address':
                                            address_components.street_address = place[0].address_components[i].long_name
                                            break
                                        case 'administrative_area_level_1':
                                            address_components.administrative_area_level_1 = place[0].address_components[i].short_name
                                            break
                                        case 'locality':
                                            address_components.locality = place[0].address_components[i].short_name
                                            break
                                    }
                                    console.log(address_components.street_address)
                                    console.log(address_components.locality)
                                    console.log(address_components.administrative_area_level_1)
                                    console.log(address_components.postal_code);
                                    console.log(lat)
                                    console.log(lng)
                                }
                                const searchedAddress = {
                                    address: value,
                                    lat,
                                    lng
                                }
                                SaveLocation(searchedAddress);
                            }

                        },
                        isClearable: true,
                        value: location,
                        placeholder: placeholder
                    }}
                />

City, state, postal, lat & lng all return fine, but no matter what I do, I can't get street_address to work. I've tried long_name and short_name as well and no difference. Any ideas why this may be happening? Any help is greatly appreciated!

Also if anyone has any alternative solutions to using autocomplete, I'm open to them. Just trying to fill out an address form using autocomplete.

Answer 1

Thanks to @MrUpsidown's comment, the selected address breaks down into individual components and street_address isn't one of them. Have to put street_number and route together to get the correct street address part of the address.

for (var i = 0; i < place[0].address_components.length; i++) {
                                    var addressType = place[0].address_components[i].types[0]
                                    switch (addressType) {
                                        case 'street_number':
                                            address_components.street_number = place[0].address_components[i].short_name
                                            break
                                        case 'route':
                                            address_components.route = place[0].address_components[i].short_name
                                            break
                                        case 'locality':
                                            address_components.locality = place[0].address_components[i].short_name
                                            break
                                        case 'administrative_area_level_1':
                                            address_components.administrative_area_level_1 = place[0].address_components[i].short_name
                                            break
                                        case 'postal_code':
                                            address_components.postal_code = place[0].address_components[i].short_name
                                            break
                                    }
                                    console.log(place[0].address_components[i])
                                }