diff --git a/.changeset/silver-items-doubt.md b/.changeset/silver-items-doubt.md
new file mode 100644
index 0000000000..f7820fe700
--- /dev/null
+++ b/.changeset/silver-items-doubt.md
@@ -0,0 +1,5 @@
+---
+"@heroui/toast": patch
+---
+
+fixed toastRegion leftover in DOM (#5502)
diff --git a/packages/components/toast/src/toast-provider.tsx b/packages/components/toast/src/toast-provider.tsx
index 7ef9d8264f..d203129a08 100644
--- a/packages/components/toast/src/toast-provider.tsx
+++ b/packages/components/toast/src/toast-provider.tsx
@@ -4,7 +4,7 @@ import type {ToastProps, ToastPlacement} from "./use-toast";
 
 import {ToastQueue, useToastQueue} from "@react-stately/toast";
 import {useProviderContext} from "@heroui/system";
-import {AnimatePresence, LazyMotion} from "framer-motion";
+import {LazyMotion} from "framer-motion";
 
 import {ToastRegion} from "./toast-region";
 
@@ -45,19 +45,17 @@ export const ToastProvider = ({
 
   return (
     <LazyMotion features={loadFeatures}>
-      <AnimatePresence>
-        {toastQueue.visibleToasts.length > 0 ? (
-          <ToastRegion
-            disableAnimation={disableAnimation}
-            maxVisibleToasts={maxVisibleToasts}
-            placement={placement}
-            toastOffset={toastOffset}
-            toastProps={toastProps}
-            toastQueue={toastQueue}
-            {...regionProps}
-          />
-        ) : null}
-      </AnimatePresence>
+      {toastQueue.visibleToasts.length > 0 && (
+        <ToastRegion
+          disableAnimation={disableAnimation}
+          maxVisibleToasts={maxVisibleToasts}
+          placement={placement}
+          toastOffset={toastOffset}
+          toastProps={toastProps}
+          toastQueue={toastQueue}
+          {...regionProps}
+        />
+      )}
     </LazyMotion>
   );
 };
diff --git a/packages/components/toast/src/toast-region.tsx b/packages/components/toast/src/toast-region.tsx
index 607024b006..f6f6f91099 100644
--- a/packages/components/toast/src/toast-region.tsx
+++ b/packages/components/toast/src/toast-region.tsx
@@ -8,6 +8,7 @@ import {useToastRegion} from "@react-aria/toast";
 import {useHover} from "@react-aria/interactions";
 import {toastRegion} from "@heroui/theme";
 import {clsx, mergeProps} from "@heroui/shared-utils";
+import {AnimatePresence} from "framer-motion";
 
 import Toast from "./toast";
 
@@ -81,37 +82,39 @@ export function ToastRegion<T extends ToastProps>({
       data-placement={placement}
       onTouchStart={handleTouchStart}
     >
-      {[...toastQueue.visibleToasts].reverse().map((toast: QueuedToast<ToastProps>, index) => {
-        if (disableAnimation && total - index > maxVisibleToasts) {
-          return null;
-        }
+      <AnimatePresence>
+        {[...toastQueue.visibleToasts].reverse().map((toast: QueuedToast<ToastProps>, index) => {
+          if (disableAnimation && total - index > maxVisibleToasts) {
+            return null;
+          }
 
-        if (
-          disableAnimation ||
-          total - index <= 4 ||
-          (isHovered && total - index <= maxVisibleToasts + 1)
-        ) {
-          return (
-            <Toast
-              key={toast.key}
-              state={toastQueue}
-              toast={toast}
-              {...mergeProps(toastProps, toast.content)}
-              disableAnimation={disableAnimation}
-              heights={heights}
-              index={index}
-              isRegionExpanded={isHovered || isTouched}
-              maxVisibleToasts={maxVisibleToasts}
-              placement={placement}
-              setHeights={setHeights}
-              toastOffset={toastOffset}
-              total={total}
-            />
-          );
-        }
+          if (
+            disableAnimation ||
+            total - index <= 4 ||
+            (isHovered && total - index <= maxVisibleToasts + 1)
+          ) {
+            return (
+              <Toast
+                key={toast.key}
+                state={toastQueue}
+                toast={toast}
+                {...mergeProps(toastProps, toast.content)}
+                disableAnimation={disableAnimation}
+                heights={heights}
+                index={index}
+                isRegionExpanded={isHovered || isTouched}
+                maxVisibleToasts={maxVisibleToasts}
+                placement={placement}
+                setHeights={setHeights}
+                toastOffset={toastOffset}
+                total={total}
+              />
+            );
+          }
 
-        return null;
-      })}
+          return null;
+        })}
+      </AnimatePresence>
     </div>
   );
 }