feat(SW-343): Handle escape route without useHandleKeyUp

components/MapModal/index.tsx

@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { Dialog, Modal } from "react-aria-components"
 
-import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import { debounce } from "@/utils/debounce"
 
 import styles from "./mapModal.module.css"
@@ -13,20 +12,18 @@ export function MapModal({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   const [mapHeight, setMapHeight] = useState("0px")
   const [mapTop, setMapTop] = useState("0px")
+  const [isOpen, setOpen] = useState(true)
 
   const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
 
   const rootDiv = useRef<HTMLDivElement | null>(null)
 
-  function onDismiss() {
-    router.back()
-  }
-
-  useHandleKeyUp((event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      onDismiss()
+  const handleOnOpenChange = (open: boolean) => {
+    setOpen(open)
+    if (!open) {
+      router.back()
     }
-  })
+  }
 
   // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
   const handleMapHeight = useCallback(() => {
@@ -70,7 +67,7 @@ export function MapModal({ children }: { children: React.ReactNode }) {
 
   return (
     <div className={styles.wrapper} ref={rootDiv}>
-      <Modal isOpen={true}>
+      <Modal isDismissable isOpen={isOpen} onOpenChange={handleOnOpenChange}>
         <Dialog
           style={
             {