1  import {useEffect, useMemo} from 'react';
 2  import {useMap} from 'react-leaflet';
 3  import useDebounce from '../../hooks/useDebounce';
 4  import useMapStore from '../../stores/useMapStore';
 5  
 6  const Bounds = () => {
 7    const map = useMap();
 8    const {bounds: storedBounds} = useMapStore();
 9    const debouncedBounds = useDebounce(storedBounds, 750);
10    const bounds = useMemo(
11      () => debouncedBounds.map(bound => bound),
12      [debouncedBounds]
13    );
14  
15    useEffect(() => {
16      if (bounds.length >= 1) {
17        map.fitBounds(bounds, {padding: [30, 30]});
18      }
19    }, [bounds]);
20  
21    return null;
22  };
23  
24  export default Bounds;