Dialog (Modal) not getting closed automatically

[SyedSibtainRazvi]

Problem statement: I am using a modal called ViewRateDesktop and displaying it to the user when they click on the ViewRate button on the Navbar. Further, this ViewRateDesktop component has another CalendarDropdown (Modal) inside it, which is being closed by the Outside Click Handler. The issue here is that my Dialog Modal is not getting closed automatically when I click outside the modal.

Also, when I remove the h-full from the Transition.child the closing of the modal works, however, the Calendar dropdown is not visible

Attaching the code for the reference, please feel free to let me know if there are any questions

import React, { Fragment, useState } from "react";
import { useTranslation } from "gatsby-plugin-react-i18next";
import { Transition, Dialog } from "@headlessui/react";
import { RxCross1 } from "react-icons/rx";
import dayjs from "dayjs";
import localeData from "dayjs/plugin/localeData";
import utc from "dayjs/plugin/utc";
import InputFloatLabel from "./Design/Input/InputFloatLabel";
import { RoomGuestSelect } from "./RoomGuestSelect/RoomGuestSelect";
import ClearTextInput from "./ClearTextIcon";
import { InputDateRangeDropdown } from "./DateRangeInput/InputDateRangeDropdown";
dayjs.extend(localeData);
dayjs.extend(utc);

type ViewRateDrawerProps = {
  isOpen: boolean;
  onClose: () => void;
};

export const ViewRatesDesktop = ({ isOpen, onClose }: ViewRateDrawerProps) => {
  const { t } = useTranslation("landingPage");

  const [guest, setGuest] = useState({
    rooms: 1,
    adults: 2,
    children: 0,
  });

  const [startDate, setStartDate] = useState(dayjs());

  const [endDate, setEndDate] = useState(dayjs(startDate).add(2, "day"));

  const setGuestCount = (updatedGuest: any) => {
    setGuest((guest) => ({
      ...guest,
      ...updatedGuest,
    }));
  };

  const [bookingCode, setBookingCode] = useState("");

  const setDateValues = (dates: any) => {
    if (dates.startDate && dates.endDate) {
      setStartDate(dates.startDate);
      setEndDate(dates.endDate);
    }
  };

  return (
    <Transition show={isOpen} as={Fragment}>
      <Dialog onClose={onClose} className="fixed inset-0 overflow-y-auto z-100">
        <div className="flex w-screen h-screen">
          <Transition.Child
            as={Fragment}
            enter="transition-opacity ease-in duration-350"
            enterFrom="opacity-0"
            enterTo="opacity-30"
            leave="transition-opacity ease-out duration-350"
            leaveFrom="opacity-30"
            leaveTo="opacity-0">
            <Dialog.Overlay className="fixed inset-0 bg-black z-110" />
          </Transition.Child>
          <Transition.Child
            as={Fragment}
            enter="transition-all linear transform duration-350"
            enterFrom="-translate-y-full overflow-hidden"
            enterTo="translate-y-0 h-full overflow-hidden"
            leave="transition-all linear transform duration-350"
            leaveFrom="translate-y-0 overflow-hidden"
            leaveTo="-translate-y-full overflow-hidden">
            <div className="fixed top-0 z-[120] w-screen overflow-x-hidden">
              <div className="w-full bg-white">
                  <div className="grid content-center justify-start w-full grid-cols-3 py-20 pl-20 overflow-hidden bg-white border-b h-68 ">
                    <span className="flex items-center justify-start col-span-1 font-black text-18 hover:cursor-pointer">
                      <RxCross1 onClick={() => onClose()} />
                    </span>
                    <div className="flex items-center justify-start col-span-2 font-bold md:justify-center font-cormorant md:col-span-1 text-20 text-slate-900 ">
                      {t("bookMyStay")}
                    </div>
                  </div>
                  {/* View Rate Form */}
                  <div className="grid w-full grid-cols-5 px-20 mx-auto lg:grid-cols-12 gap-x-[20px]">
                    <div className="col-span-12 lg:mt-20">
                      <div className="pb-20">
                        <div className="flex-col gap-16 lex lg:items-center lg:justify-center lg:flex-row">
                          <div className="container max-w-[890px] m-auto">
                            <div className="z-10 grid grid-cols-2 lg:grid-cols-5 lg:shadow-input-booking">
                              <div className="w-full grid-cols-2 col-span-2 lg:col-span-2 shadow-input-booking lg:shadow-none">
                                <InputDateRangeDropdown
                                  setDateValues={setDateValues}
                                  endDate={endDate}
                                  startDate={startDate}
                                  fullBorderInput={false}
                                  withIcon={false}
                                />
                              </div>
                              <div className="col-span-2 mt-16 border lg:border-0 border-gray-light lg:col-span-1 lg:mt-0 shadow-input-booking lg:shadow-none">
                                <RoomGuestSelect
                                  rooms={guest.rooms}
                                  adults={guest.adults}
                                  children={guest.children}
                                  setGuestCount={setGuestCount}
                                />
                              </div>
                              <div className="col-span-2 my-16 border border-l-0 lg:border-0 lg:border-l border-gray-light shadow-input-booking lg:shadow-none lg:col-span-1 lg:my-0">
                                <InputFloatLabel
                                  name="bookingCode"
                                  value={bookingCode}
                                  onChange={(e) =>
                                    setBookingCode(e.target.value)
                                  }
                                  label={t("bookingCode")}
                                  placeholder={t("bookingCodePlaceholder")}
                                  className="h-full cursor-pointer"
                                  noBorder
                                  floatLabelByDefault
                                  suffixIcon={
                                    bookingCode && (
                                      <ClearTextInput
                                        className="w-20 h-20 cursor-pointer text-gray-dark z-2"
                                        onClick={() => setBookingCode("")}
                                      />
                                    )
                                  }
                                  readOnly={true}
                                />
                              </div>
                              <div className="col-span-2 lg:col-span-1 lg:shadow-input-booking">
                                <div className="whitespace-nowrap lg:h-60 lg:grow lg:basis-0">
                                  <button className="w-full h-full px-20 font-semibold text-white uppercase transition duration-300 ease-in-out bg-orange-300 rounded-sm font-mulish tracking-16 focus:outline-none text-14-22 py-14 hover:cursor-pointer hover:bg-orange-400 lg:rounded-l-none lg:rounded-r-sm">
                                    {t("View Rates")}
                                  </button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
              </div>
            </div>
          </Transition.Child>
        </div>
      </Dialog>
    </Transition>
  );
};

Navbar

import React, { lazy, Suspense, useState } from "react";
import { StaticImage } from "gatsby-plugin-image";
import { desktopNavMenuOptions } from "../constants/desktopNavbarOptions";
import { Toolbar } from "./Toolbar";
import { useTranslation } from "gatsby-plugin-react-i18next";
import { RxHamburgerMenu } from "react-icons/rx";
import { Link } from "gatsby-plugin-react-i18next";

const HamburgerMenu = lazy(() =>
  import("./HamburgerMenu").then((module) => ({
    default: module["HamburgerMenu"],
  }))
);

const ViewRatesDesktop = lazy(() =>
  import("./ViewRateDesktop").then((module) => ({
    default: module["ViewRatesDesktop"],
  }))
);

export const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isViewRatesOpen, setViewRatesOpen] = useState(false);

  const { t } = useTranslation();

  const handleViewRatesButtonClick = () => {
    setViewRatesOpen(!isViewRatesOpen);
  };

  const handleHamburgerClick = () => {
    setIsOpen(!isOpen);
  };

  return (
    <div>
      <Suspense fallback={null}>
        <HamburgerMenu isOpen={isOpen} onClose={handleHamburgerClick} />
        <ViewRatesDesktop
          isOpen={isViewRatesOpen}
          onClose={handleViewRatesButtonClick}
        />
      </Suspense>
      <Toolbar />
      {/* {Desktop Navbar} */}
      <div className="hidden xl:block">
        <div className="flex content-center py-16 uppercase px-30 font-mulish">
          <div className="w-170">
            <Link to="/">
              <StaticImage
                src="../images/delonixlogo.svg"
                alt="Delonix-logo"
                className="w-11/12 h-auto"
                loading="eager"
              />
            </Link>
          </div>
          <div className="flex items-center ml-auto space-x-25 mr-30 text-12">
            {desktopNavMenuOptions.map((option) => (
              <div key={option.id} className="relative flex justify-center">
                {option.link === "external" ? (
                  <a href={option.linkName} target="_blank">
                    <div className="flex items-center cursor-pointer tracking-16">
                      <p className="uppercase border-box">{t(option.name)}</p>
                    </div>
                  </a>
                ) : (
                  <Link
                    to={"/" + option.linkName.toLowerCase()}
                    activeStyle={{
                      textDecoration: "underline solid orange 4px",
                      textUnderlineOffset: "10px",
                    }}>
                    <div className="flex items-center cursor-pointer tracking-16">
                      <p className="uppercase border-box">{t(option.name)}</p>
                    </div>
                  </Link>
                )}
              </div>
            ))}
          </div>
          <div onClick={handleViewRatesButtonClick}>
            <button className="w-142 rounded-sm bg-orange-300 py-2.5 px-2 ml-4 text-center font-mulish text-12-22 text-white tracking-16 hover:cursor-pointer transition ease-in-out duration-300 hover:bg-orange-400 uppercase">
              {t("View Rates")}
            </button>
          </div>
        </div>
      </div>

      {/* {Mobile Navbar} */}
      <div className="flex items-center justify-between w-full px-20 py-12 shadow-md h-70 xl:hidden">
        <div className="flex justify-center w-170">
          <Link to="/">
            <StaticImage
              src="../images/delonixlogo.svg"
              alt="Delonix-logo"
              className="w-full h-auto"
              loading="eager"
            />
          </Link>
        </div>
        <div
          onClick={handleHamburgerClick}
          className="flex items-center justify-center w-40 h-40 bg-orange-300 hover:cursor-pointer">
          <RxHamburgerMenu className="text-white text-20" />
        </div>
      </div>
    </div>
  );
};