1import {useEffect, useMemo} from 'react';
 2import {useMap} from 'react-leaflet';
 3import useDebounce from '../../hooks/useDebounce';
 4import useMapStore from '../../stores/useMapStore';
 5
 6const 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
24export default Bounds;