所以我在这里做的是创建一个函数，当我在日历中单击日期时，它将打开Dialog/Modal。当我打开它的时候，它工作得非常好，但是当我试图按下关闭按钮的时候，它不工作，甚至当我按下退出按钮的时候。
我不能按X键。有没有什么方法可以让这个工作，我已经被困在这里好几天了，或者我应该创建一个单独的按钮？

const Schedules = (props: Omit<CalendarProps, "localizer">) => {
  const [isDialogOpen, setDialogOpen] = useState(false); // State to manage dialog visibility

  const openDialog = () => {
    setDialogOpen(true);
  };

  const closeDialog = () => {
    setDialogOpen(false);
  };

  const handleSelect = (slotInfo: any) => {
    // Handle date selection
    openDialog(); // Open the dialog when a date is selected
  };

  

  return (
    <div  ">
      <Calendar
        className="p-4 shadow-2xl rounded-lg bg-slate-50 border-2 border-gray-20"
        selectable
        defaultDate={new Date()}
        localizer={localizer}
        views={["day", "week", "month"]}
        onSelectSlot={handleSelect}

      />

      <Dialog open={isDialogOpen} onClose={closeDialog}>
        <DialogTrigger asChild>
          <Button variant="outline">Edit Profile</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogDescription>
              Make changes to your profile here. Click save when you're done.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="name" className="text-right">
                Name
              </Label>
              <Input
                id="name"
                defaultValue="Pedro Duarte"
                className="col-span-3"
              />
            </div>
            <div className="grid grid-cols-4 items-center gap-4">
              <Label htmlFor="username" className="text-right">
                Username
              </Label>
              <Input
                id="username"
                defaultValue="@peduarte"
                className="col-span-3"
              />
            </div>
          </div>
          <DialogFooter>
            <Button type="submit">Save changes</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default Schedules;