React toastify dismiss method not working?

Question

While uploading file I want to show the progress of upload. So I used react toastify package. But after the upload completes I am calling dismiss() method to dismiss the toast programmatically but the toast is not closing. I also tried autoClose attribute, it's also not working.

const toastId = useRef(null)

const sendFile = async () => {
    try{
        const formData = new FormData()
        formData.append("file", file) // file is a state

        await axios.post(
            "/api/message",
            formData,
            {
                headers: {"Content-type": "multipart/form-data"}
            },
            onUploadProgress: p => {
                const progress = (p.loaded / p.total);

                if (toastId.current === null) {
                    toastId.current = toast.info('Upload in Progress', {
                        progress,
                        hideProgressBar: false
                    });
                } else {
                    t.update(toastId.current, { progress });
                }
            }}
        );

        toast.update(toastId.current, {
            render: "File sent successfully",
            type: "success"
        })

        toast.dismiss();
        toastId.current = null

    } catch (error) {
        toast.update(toastId.current, {
            render: error.response.data.message,
            type: "error",
        });
        toast.dismiss();
        toastId.current = null
    }
};