I’m having a little bit of trouble, I can now pass the data to the backend, but the problem I’m encountering right now wherein after the user submit the form, the Dialog didn’t close.

I have here a custom calendar wherein if the user select a date, it will change the state of open into true, and after that, I’m passing it to CreateScheduleDialog component.

Calendar.tsx

  const [date, setDate] = useState<Date | undefined>(new Date())
  const [open, setOpen] = useState<boolean>(false);

  const openDialogBox = (currentDate: Date | undefined) => {
    if (currentDate) {
      setDate(currentDate);
      setOpen(true);

    } else {
      setDate(currentDate);
      setOpen(false);
    }
  };

  return (
    <div className='flex flex-col gap-y-2 h-full md:h-[800px] '>
      <CreateScheduleDialog open={open} setOpen={setOpen} pickedDate={date} />
      <Calendar
        mode="single"
        selected={date}
        onSelect={openDialogBox}
        disabled={(date) => new Date(date) <= new Date()}
        className="shadow border rounded-md h-full w-full flex"
        classNames={{
          months:
            "flex w-full flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 flex-1",
          month: "space-y-4 w-full flex flex-col",
          table: "w-full h-full border-collapse space-y-1",
          head_row: "",
          row: "w-full mt-2",
        }}
        outsidePrompts={"bg-transparent"}
      />
    </div>

  )
}

After submitting it, I make the setOpen to false but nothing happens

Form.tsx

const CreateScheduleDialog = ({ open, setOpen, pickedDate }: Props) => {

  const { mutate, isPending } = useMutation({
    mutationFn: CreateAppointment,
    onSuccess: () => {
      toast.success('Appointment created successfully ????', {
        id: "create-appointment"
      })

      form.reset();

      queryClient.invalidateQueries({ queryKey: ["appointment"] });
      setOpen(false);
    }

  })



  const onSubmit = useCallback((values: CreateAppointmentSchemaType) => {
    toast.loading("Creating Appointment...", {id: 'create-appointment'});
    mutate(values)


  },[mutate])


return (
<Dialog >
      <DialogTrigger asChild>
        <Button
         onClick={() => setOpen(true)}  
          className='w-full' color="primary-foreground"
          >Add Schedule</Button>
      </DialogTrigger>
      <DialogContent className={cn(`max-w-[400px] md:max-w-[800px]`)}>
        <DialogHeader>
          <DialogTitle>{currentStep.name}</DialogTitle>
          <DialogDescription>
            Step {step + 1} of {steps.length}
          </DialogDescription>
        </DialogHeader>
        <Form {...form} >
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
          </form>
        </Form>
     </DialogContent>
       </Dialog />

  )
}