In Intersection Observer how can I use my different refs of my items to check the visibility and animate it

Question

How can I animate my items by checking each items in list is visible or not?

function AnotherPrizeCard(props) {

    const myRef = useRef([]);
    const [myPrize, setMyPrize] = useState(false);
    const Next_Prize = NEXTPRIZE.Upcoming_Events;
    myRef.current = [];

    const addRef = (el) => {
        if (el && !myRef.current.includes(el)) {
            myRef.current.push(el);
        }
        console.log(myRef.current, "refs");
    }

    useEffect(() => {
        const observer = new IntersectionObserver((entries) => {
            const entry = entries[0];
            setMyPrize(entry.isIntersecting);
        })
        observer.observe(myRef.current);
        return observer;
    }, [])

    return (
        <div>
            {Next_Prize.map((NextPrize, i) => (
                <div className="flex flex-col snap-start h-[100vh] relative pb-[30px] pt-[180px] items-center justify-center">
                    <div className="flex flex-col h-[100vh] mb-[50px] md:mt-[50px] max-w-[700px] m-auto items-center justify-center relative pb-[25px]">
                        <div ref={addRef} className={`${myPrize ? 'animate-slideleft' : ''} absolute flex text-[54px] font-bold mb-[50px]`}>
                            <div key={i} className="text-black font-spaceGgrotesk bg-clip-text text-transparent bg-gradient-to-br from-transparent via-black to-transparent" >{NextPrize.Event_Prize_Name}</div>
                        </div>
                        <div className="flex flex-col text-center relative w-[200px] h-[200px] justify-center items-center">
                            <div className="w-[200px] md:w-[280px] absolute h-[120px] md:h-[174px] bottom-0">
                                <Image src={PrizeCardImage} alt="background" />
                            </div>
                            <div className={`items-center md:bottom-[20px] absolute h-[150px] top-[-1px] md:top-[-80px] w-[150px] md:w-[200px] m-auto md:h-[200px]`}>
                                <Image layout="fill" src={NextPrize.Prize} alt="prize" className="object-contain " />
                            </div>
                            <div className={`w-[150px] absolute md:w-[250px] m-auto bottom-[18px] md:bottom-[10px]`}>
                                <Image src={watchShadow} alt="shadow" />
                            </div>
                            <div className="md:w-[240px] font-sligoil font-normal absolute bottom-[6px] md:font-400  text-[12px] md:text-[16px]">
                                {NextPrize.No_of_winners}
                            </div>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    );
}

I created the ref for the each element in the array. But now i need animate it when each element is visible

Unhandled Runtime Error
TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

I get this error when I run it.