I'm trying to render some cards with different content every 10 seconds, I first fetch the data from the API and then render the first set of data on cards and what I want to do is change the cards content every 10 seconds

For the moment I'm using this:

    const [cards, setCards] = useState<[]>([])

    useEffect(() => {

     props.data.map( (data: any, i: any) => 

          setTimeout(() => {
            setCards(data)
          }, i * 10000)
     )

    }, [cards])

    return (
        <Wrapper>
            <h1>Hello World!</h1>
            <Hero img={bg} />
            <Cards cards={cards} />
        </Wrapper>
    )

That's currently not working, what can I do to make it work correctly ? My final result is every 10 seconds change the content (I will implement some animations too)