fix: update state based on breakpoint

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} />