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 {markers} = useMapStore();
 9  const debouncedMarkers = useDebounce(markers, 750);
10  const bounds = useMemo(
11    () => debouncedMarkers.map(marker => marker.center),
12    [debouncedMarkers]
13  );
14
15  useEffect(() => {
16    map.fitBounds(bounds, {padding: [30, 30]});
17  }, [bounds]);
18
19  return null;
20};
21
22export default Bounds;