React toastify popup not showing

Question

I want to show a success message popup using react toastify after closing a modal but it is not working. Maybe because i am using animation to give a slight delay when closing modal. Can i do something like use timeout and then run setIModalOpen(false) so the popup message can be shown before modal is closed.

Modal Component

const onFormSubmitHandler=(e)=>{
    e.preventDefault();
    if(!inputRef.current.value)
      return;

//callback from parent component
updateUnavailableTimeSlotsInDb(inputRef.current.value, date,`${date} ${selectedTimeSlot}:00`);
    
    toast.success(`Booked for ${reasonStr} on ${selectedDate} at time ${selectedTimeSlot}:00`, {
          position: "top-center",
          autoClose: 2000,
          hideProgressBar: true,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });

    inputRef.current.value='';

    setIsModalOpen(false);

  }

Parent (tried calling toast.success in the callback in the parent component but that is also not working)

 const updateUnavailableTimeSlotsInDb=(reasonStr,selectedDate,selectedTimeSlot)=>{
         
        //popup with confirmation message
        /*toast.success(`Booked for ${reasonStr} on ${selectedDate} at time ${selectedTimeSlot}:00`, {
          position: "top-center",
          autoClose: 2000,
          hideProgressBar: true,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          });*/

        //add selectedTimeSlot to database. timeSlot will no longer be 
          available
        unavailableTimeSlotsMutation.mutate({
         [selectedTimeSlot]:true
        })

Edit:i was not using ToastContainer just figured it out

Answer 1

i was not using ToastContainer just figured it out