fix(ts/components/NearbyStops): refresh stops when inputs to function…

… change (#2258)

* fix(ts/components/NearbyStops): refresh stops when inputs to function change


Asana Ticket: [⚙️🐞 When selected route direction changes excluded nearby bus stops do not update](https://app.asana.com/0/1148853526253420/1205560497394206/f)
Co-authored-by: Eddie Maldonado <emaldonado@mbta.com>

assets/src/components/mapPage/mapDisplay.tsx

@@ -455,13 +455,28 @@ const NearbyStops = ({ stops }: { stops: Stop[] }) => {
   )
   const [nearbyStops, setNearbyStops] = useState<Stop[]>([])
   const map = useMap()
-  map.addEventListener("moveend", () => {
+
+  const filterStopsToBounds = useCallback(() => {
     const bounds = map.getBounds()
     // Only show nearby stations or bus stops
     setNearbyStops(
       stationsAndBus.filter((s) => bounds.contains([s.lat, s.lon]))
     )
-  })
+  }, [map, stationsAndBus, setNearbyStops])
+
+  // Filter stops whenever function, and its inputs, change
+  useEffect(() => {
+    filterStopsToBounds()
+  }, [filterStopsToBounds])
+
+  // Re-Filter stops when finished moving the map
+  useEffect(() => {
+    const mapEvent = "moveend"
+    map.addEventListener(mapEvent, filterStopsToBounds)
+    return () => {
+      map.removeEventListener(mapEvent, filterStopsToBounds)
+    }
+  }, [map, filterStopsToBounds])
 
   return (
     <ZoomLevelWrapper>