Estoy tratando de renderizar algunas tarjetas con contenido diferente cada 10 segundos, primero busco los datos de la API y luego renderizo el primer conjunto de datos en las tarjetas y lo que quiero hacer es cambiar el contenido de las tarjetas cada 10 segundos

Por el momento estoy usando esto:

 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> )

Eso actualmente no funciona, ¿qué puedo hacer para que funcione correctamente? Mi resultado final es que cada 10 segundos cambie el contenido (también implementaré algunas animaciones)