From 446e1c7e51d9c2a88486e4aa96ad476dbd0d6632 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Thu, 14 Nov 2024 14:10:56 +0100
Subject: [PATCH] fix: update state based on breakpoint

---
 components/GuestsRoomsPicker/index.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/GuestsRoomsPicker/index.tsx b/components/GuestsRoomsPicker/index.tsx
index 810394195..2ce978b39 100644
--- a/components/GuestsRoomsPicker/index.tsx
+++ b/components/GuestsRoomsPicker/index.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import {
   Button,
   Dialog,
@@ -23,7 +24,8 @@ export default function GuestsRoomsPickerForm() {
   const { watch } = useFormContext()
   const rooms = watch("rooms") as GuestsRoom[]
 
-  const isDesktop = useMediaQuery("(min-width: 1367px)")
+  const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
+  const [isDesktop, setIsDesktop] = useState(true)
 
   const htmlElement =
     typeof window !== "undefined" ? document.querySelector("body") : null
@@ -40,6 +42,10 @@ export default function GuestsRoomsPickerForm() {
     }
   }
 
+  useEffect(() => {
+    setIsDesktop(checkIsDesktop)
+  }, [checkIsDesktop])
+
   return isDesktop ? (
     <DialogTrigger onOpenChange={setOverflowClip}>
       <Trigger rooms={rooms} className={styles.triggerDesktop} />