diff --git a/registry/default/magicui/animated-list.tsx b/registry/default/magicui/animated-list.tsx
index 4f045d80..79bc0d64 100644
--- a/registry/default/magicui/animated-list.tsx
+++ b/registry/default/magicui/animated-list.tsx
@@ -12,26 +12,31 @@ export interface AnimatedListProps {
 export const AnimatedList = React.memo(
   ({ className, children, delay = 1000 }: AnimatedListProps) => {
     const [index, setIndex] = useState(0);
-    const childrenArray = React.Children.toArray(children);
+    const childrenArray = useMemo(
+      () => React.Children.toArray(children),
+      [children],
+    );
 
     useEffect(() => {
-      const interval = setInterval(() => {
-        setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length);
-      }, delay);
+      if (index < childrenArray.length - 1) {
+        const timeout = setTimeout(() => {
+          setIndex((prevIndex) => prevIndex + 1);
+        }, delay);
 
-      return () => clearInterval(interval);
-    }, [childrenArray.length, delay]);
+        return () => clearTimeout(timeout);
+      }
+    }, [index, delay, childrenArray.length]);
 
-    const itemsToShow = useMemo(
-      () => childrenArray.slice(0, index + 1).reverse(),
-      [index, childrenArray],
-    );
+    const itemsToShow = useMemo(() => {
+      const result = childrenArray.slice(0, index + 1).reverse();
+      return result;
+    }, [index, childrenArray]);
 
     return (
       <div className={`flex flex-col items-center gap-4 ${className}`}>
         <AnimatePresence>
           {itemsToShow.map((item) => (
-            <AnimatedListItem key={(item as ReactElement).key}>
+            <AnimatedListItem key={(item as React.ReactElement).key}>
               {item}
             </AnimatedListItem>
           ))}