feat(sw-453): fixed mobile view and some improvements

components/HotelReservation/SelectRate/Rooms/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { useCallback,useState } from "react"
 
 import { RoomsAvailability } from "@/server/routers/hotels/output"
 
@@ -20,21 +20,25 @@ export default function Rooms({
 }: RoomSelectionProps) {
   const [rooms, setRooms] = useState<RoomsAvailability>(roomsAvailability)
 
-  function handleFilter(filter: Record<string, boolean | undefined>) {
-    const selectedCodes = Object.keys(filter).filter((key) => filter[key])
+  const handleFilter = useCallback(
+    (filter: Record<string, boolean | undefined>) => {
+      const selectedCodes = Object.keys(filter).filter((key) => filter[key])
 
-    if (selectedCodes.length === 0) {
-      setRooms(roomsAvailability)
-      return
-    }
+      if (selectedCodes.length === 0) {
+        setRooms(roomsAvailability)
+        return
+      }
 
-    const filteredRooms = roomsAvailability.roomConfigurations.filter((room) =>
-      room.features.some((feature) =>
-        selectedCodes.includes(feature.code as RoomPackageCodes)
+      const filteredRooms = roomsAvailability.roomConfigurations.filter(
+        (room) =>
+          room.features.some((feature) =>
+            selectedCodes.includes(feature.code as RoomPackageCodes)
+          )
       )
-    )
-    setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
-  }
+      setRooms({ ...roomsAvailability, roomConfigurations: filteredRooms })
+    },
+    [roomsAvailability]
+  )
 
   return (
     <div className={styles.content}>