users can click outside of modal to close the modal for info only modals. Take away that ability for important modals

frontend/src/components/RentalCancellationModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect } from "react";
 import { rentalAPI } from "../services/api";
 import { RefundPreview, Rental } from "../types";
 
@@ -129,38 +129,17 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
     return "success";
   };
 
-  const handleBackdropClick = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.target === e.currentTarget) {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-
   useEffect(() => {
     if (show) {
-      document.addEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "hidden";
     } else {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     }
 
     return () => {
-      document.removeEventListener("keydown", handleKeyDown);
       document.body.style.overflow = "unset";
     };
-  }, [show, handleKeyDown]);
+  }, [show]);
 
   if (!show) return null;
 
@@ -168,7 +147,6 @@ const RentalCancellationModal: React.FC<RentalCancellationModalProps> = ({
     <div
       className="modal d-block"
       style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
-      onClick={handleBackdropClick}
     >
       <div className="modal-dialog modal-lg modal-dialog-centered">
         <div className="modal-content">