diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index b1b9ffe8c4e9d8..b9a6de9fe5ac00 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -123,11 +123,25 @@ Toast.notify = ({
     const holder = document.createElement('div')
     const root = createRoot(holder)
 
-    root.render(<Toast type={type} size={size} message={message} duration={duration} className={className} />)
+    root.render(
+      <ToastContext.Provider value={{
+        notify: () => {},
+        close: () => {
+          if (holder) {
+            root.unmount()
+            holder.remove()
+          }
+        },
+      }}>
+        <Toast type={type} size={size} message={message} duration={duration} className={className} />
+      </ToastContext.Provider>,
+    )
     document.body.appendChild(holder)
     setTimeout(() => {
-      if (holder)
+      if (holder) {
+        root.unmount()
         holder.remove()
+      }
     }, duration || defaultDuring)
   }
 }