How to apply animation to a newly added item to the "beginning" of a virtual list

[hoffnung8493]

I have a list (ex. [1, 2, 3]) and this list gets updated at zero index (ex. updated list after a few seconds: [0, 1, 2, 3])
So this zero would appear at the top of the rendered list. It does work correctly.
Now I want to apply animation to the newly added item, so that its clear to the user that this was newly added. It works if I append new items at the end of the array (updated array: [1,2,3,4]), but it does not work in my case, where I want to append a new item at the very beginning.

Also I realized that the animation would take effect to other items when I scroll away and scroll back due to virtualization. But I only want animation for the new ones, so I have added some basic condition. Based on the condition, only the new item's background is set to red, which is applied properly. But the animation doesnt work for some reason..

Below is the minimum code snippet:

import { useEffect, useRef, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useVirtualizer } from "@tanstack/react-virtual";

export default function Route() {
  const [list, setList] = useState([1, 2, 3]);

  useEffect(() => {
    const id = setInterval(() => {
      setList((prev) => [prev[0] - 1, ...prev]);
    }, 1000);
    return () => {
      clearInterval(id);
    };
  }, []);

  const parentRef = useRef<HTMLDivElement>(null);

  const rowVirtualizer = useVirtualizer({
    count: list.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40,
    overscan: 2,
  });

  return (
    <div className="w-[400px] h-[500px] overflow-y-scroll overflow-x-hidden" ref={parentRef}>
      <div
        style={{
          height: `${rowVirtualizer.getTotalSize()}px`,
          width: "100%",
          position: "relative",
        }}
      >
        {rowVirtualizer.getVirtualItems().map((virtualItem) => {
          const item = list[virtualItem.index];
          const isNewest = virtualItem.index === 0;

          if (!isNewest)
            return (
              <div
                key={virtualItem.index}
                style={{
                  position: "absolute",
                  top: 0,
                  left: 0,
                  width: "100%",
                  height: `${virtualItem.size}px`,
                  transform: `translateY(${virtualItem.start}px)`,
                }}
              >
                <div className="bg-green-400">{item}</div>
              </div>
            );

          return (
            <div
              key={virtualItem.index}
              style={{
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: `${virtualItem.size}px`,
                transform: `translateY(${virtualItem.start}px)`,
              }}
            >
              <AnimatePresence>
                <motion.div
                  initial={{ opacity: 0, y: 50, scale: 0.3 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                >
                  <div className={"bg-red-400"}>{item}</div>
                </motion.div>
              </AnimatePresence>
            </div>
          );
        })}
      </div>
    </div>
  );
}

[ShMcK]

If you use unique ids for the key={virtualItem.index}, would this work.
When you add new items to the top, the index will be 0 - which already exists.