React google places autocomplete returning only one place (Needing zip)

I’m attempting to use react google autocomplete, the issue I’m having is that for some reason both libraries react-google-places-autocomplete and react-places-autocomplete always return a single value from the search I make, which is wrong since when searching on google or with use-places-autocomplete it returns more values.

For example, when searching: 81237

The result I get from react-google-places-autocomplete and react-places-autocomplete array of 1:

[
    {
        "address_components": [
            {
                "long_name": "81237",
                "short_name": "81237",
                "types": [
                    "postal_code"
                ]
            },
            {
                "long_name": "Ohio City",
                "short_name": "Ohio City",
                "types": [
                    "locality",
                    "political"
                ]
            },
           ...
        ],
        "formatted_address": "Ohio City, CO 81237, USA",
        "geometry": {
           ...
        },
        "place_id": "ChIJJXK28KjiP4cRZNwTV9HTmB0",
        "types": [
            "postal_code"
        ]
    }
]

but from use-places-autocomplete array of 5:

[
    {
        "description": "Ohio City, CO 81237, USA",
        "matched_substrings": [
            {
                "length": 5,
                "offset": 14
            }
        ],
        "place_id": "ChIJJXK28KjiP4cRZNwTV9HTmB0",
        "reference": "ChIJJXK28KjiP4cRZNwTV9HTmB0",
        "structured_formatting": {
           ....
        },
        "terms": [
            {
                "offset": 0,
                "value": "Ohio City"
            },
            ...
        ],
        "types": [
            "postal_code",
            "geocode"
        ]
    },
    {
        "description": "81237 Geranium Avenue, Indio, CA, USA",
        "matched_substrings": [
            {
                "length": 5,
                "offset": 0
            }
        ],
        "place_id": "ChIJWQb2oxH42oAR_9paiGTudYc",
        "reference": "ChIJWQb2oxH42oAR_9paiGTudYc",
        "structured_formatting": {
          ...
        },
        "terms": [
            {
                "offset": 0,
                "value": "81237"
            },
            ...
        ],
        "types": [
            "premise",
            "geocode"
        ]
    },
    {
        "description": "81237 Victoria Lane, La Quinta, CA, USA",
        "matched_substrings": [
            {
                "length": 5,
                "offset": 0
            }
        ],
        "place_id": "ChIJv5gvO0RX2oARay4BYKgPMGA",
        "reference": "ChIJv5gvO0RX2oARay4BYKgPMGA",
        "structured_formatting": {
         ...
        },
        "terms": [
            {
                "offset": 0,
                "value": "81237"
            },
          ...
        ],
        "types": [
            "premise",
            "geocode"
        ]
    }
]

code logic:

import { geocodeByAddress } from 'react-google-places-autocomplete'

 const handleAddressOptionsFilter = async () => {
    try {
      if (!fieldAdrress) {
        setAddressOptions([])
        return
      }

      const formattedResults = data.map((result) => ({
        label: result.description,
        value: result,
      }))

      const rs = await geocodeByAddress(fieldAdrress)

      console.log('NewEvent: ', data, rs)

      setAddressOptions(formattedResults)
    } catch (error) {
      console.error('Error fetching geocode data:', error)
    }
  }

  const handleAddressOnChange = (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    form.setValue('address', event.target.value)
    setValue(event.target.value)
  }

  const handleAddressSelect = (option: Option) => {
    const street = option.value.terms[0].value
    const neighborhood = option.value.terms[1].value
    const city = option.value.terms[2].value
    const state = option.value.terms[3].value
    const country = option.value.terms[4].value

    if (street) form.setValue('address', street as string)
    if (city) form.setValue('city', city as string)
    if (state) form.setValue('state', state as string)
    // if (zip) form.setValue('zip', zip?.long_name as string)
  }

  return (
    <Base hideBg={true} bottomBar={false} allowFullHeight={true}>
      <div className="flex flex-1 mt-[18px] items-center h-full flex-col mb-[50px]">
        <form className="flex flex-col items-center">

              <Input
                type="autocomplete"
                placeholder="Address"
                className="mt-[18px]"
                register={form.register('address')}
                hasError={form.formState.errors.address?.message}
                form={form}
                onCompleteFunction={handleAddressOptionsFilter}
                onCompleteOptions={addressOptions}
                onChange={handleAddressOnChange}
                onSelect={handleAddressSelect}
              />
            

on the index.js I inserted the:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY=places"></script>

I need to use the libraries from react-google-places-autocomplete and react-places-autocomplete because use-places-autocomplete does not return a ZIP