From 562b186d40bf39ebeb95a6fedb7fa4c1bf5c0238 Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Tue, 3 Dec 2024 20:31:14 +0100
Subject: [PATCH] fix: SW-1139 Fixed hydration error

---
 .../HotelReservation/SelectRate/RoomFilter/index.tsx     | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
index c800c3cc9..1d874ec6e 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { useCallback, useEffect, useMemo } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
@@ -27,7 +27,8 @@ export default function RoomFilter({
   onFilter,
   filterOptions,
 }: RoomFilterProps) {
-  const isAboveMobile = useMediaQuery("(min-width: 768px)")
+  const isTabletAndUp = useMediaQuery("(min-width: 768px)")
+  const [isAboveMobile, setIsAboveMobile] = useState(false)
 
   const initialFilterValues = useMemo(
     () =>
@@ -71,6 +72,10 @@ export default function RoomFilter({
     return () => subscription.unsubscribe()
   }, [handleSubmit, watch, submitFilter])
 
+  useEffect(() => {
+    setIsAboveMobile(isTabletAndUp)
+  }, [isTabletAndUp])
+
   return (
     <div className={styles.container}>
       <div className={styles.infoDesktop}>