Let's say I have an example of a few cards that are associated with an account, like this:

function getCards() {
    return {
        main: {
            amount: "2,500,727.69"
        },
        loyalty: {
            amount: "727"
        },
        usd: {
            amount: "100,000"
        },
        euro: {
            amount: "100,000"
        },
        secondary: {
            amount: "100,000"
        }
    }
}

I want to display let's say only 3 at the same time, and have a left arrow and right arrow that lets me cycle between them, how would I go about implementing this? I'm thinking of using something like mapping:

                <section className="flex flex-row p-4 gap-4 border-b-2 w-[70%] overflow-scroll rounded">
                    <button className="text-black material-symbols-outlined text-[30px]">arrow_back</button>
                        {Cards.map((card, index) => (
                            <MainCard key={index} amount={card.main.amount} />))}
                    <button className="text-black material-symbols-outlined text-[30px]">arrow_forward</button>
                </section>
            

but I don't know if that would work for this, any ideas?