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>}
        ```