how to scroll a set of components

Question

I'm fairly new to react and have been asked to create a scrolling scoreboard.

I am ok with creating a series of components that hold the team names and their scores but I am a bit stuck working out how to animate them all down the screen.

Any pointers?

Many thanks

My code so far...

import ScoreboardItem from "./ScoreboardItem";

const Scoreboard = () => {

    const scoreList = [
        {id:1, name:"name1", score: 100},
        {id:2, name:"name2", score: 90},
        {id:3, name:"name3", score: 80},
        {id:4, name:"name4", score: 70},
        {id:5, name:"name5", score: 60}
    ];

    useEffect(() => {
        console.log("initial render");
        //let scores = document.querySelector(".scoreItem");
        //scores.style.top = "50px";
    }, []);

    return (
        <div>
            <div>scoreboard</div>
            {scoreList.map((item) => (
                <ScoreboardItem key={item.id} name={item.name} score={item.score} initialPos={item.id * 100}/>
            ))}
        </div>
    )
}

export default Scoreboard;