Too many suggestions breaks my website

[KanoDekouBillyBrown]

Coding Questions

When i start typing into the input field i get soo many suggestions because it is not limited to the area around the user so much so that my app breaks and freezes eventually it just crashes and i need to hard restart the server , I tried using locationBias inorder to limit the range of suggesstion to 5km around the user but it doesn't work

Here i am currently getting the users location

import { useState } from 'react';

const useCurrentLocation = () => {
    const [location, setLocation] = useState<GeolocationPosition | null>(null);
    const [error, setError] = useState<string | null>(null);

    const requestLocation = () => {
        if (!navigator.geolocation) {
            setError('Geolocation is not supported by your browser');
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (position) => {
                setLocation(position);
            },
            (err) => {
                setError(err.message);
            }
        );
    };

    return { location, error, requestLocation };
};

export default useCurrentLocation;

Here i use it in my modal form to population locationBias with lat and Lng

 const { isOpen, onClose } = useDialog()
  const [isLoading, setIsLoading] = useState(false)
  const { location, error, requestLocation } = useCurrentLocation()
  const [bounds, setBounds] = useState<google.maps.LatLngBounds | undefined>(
    undefined
  )
  const [locationBias, setLocationBias] = useState<
    google.maps.LatLngLiteral | undefined
  >(undefined)

  useEffect(() => {
    if (location) {
      const { latitude, longitude } = location.coords // Ensure proper typing here
      setLocationBias({ lat: latitude, lng: longitude })
    }
  }, [location])

Here i pass it in the usePlacesHook Instance

  const {
    ready,
    value,
    setValue,
    suggestions: { status, data },
    clearSuggestions
  } = usePlacesAutocomplete({
    callbackName: 'mapApi',

    requestOptions: {
      types: ['sublocality_level_1', 'route'],
      componentRestrictions: { country: 'CM' },
      locationBias: locationBias
        ? new google.maps.Circle({
            center: locationBias,
            radius: 5000 // 5 km radius
          })
        : undefined
    }
  })

This is the part of my form that handles geocoding

   <Input
            value={value}
            onChange={e => {
              setValue(e.target.value)
            }}
            disabled={!ready}
            onFocus={requestLocation}
            className={'py-2'}
            placeholder={'Enter Address'}
          />
          {status === 'OK' && (
            <ul
              className={
                'relative bottom-0  w-full gap-2 rounded-xl border bg-white p-4'
              }
            >
              {data?.map(suggestion => {
                const {
                  place_id,
                  structured_formatting: { main_text, secondary_text }
                } = suggestion
                console.log(suggestion)
                const address = `${main_text}, ${secondary_text}`
                setFormValue('address', address)
                trigger('address')
                return (
                  <li
                    key={place_id}
                    className={'cursor-pointer  border-b p-2'}
                    onClick={handleSelect(suggestion)}
                  >
                    <strong>{main_text} </strong>
                    <small>{secondary_text}</small>
                  </li>
                )
              })}
            </ul>
          )}
          {error && <p>{error}</p>}