Estoy trabajando en este proyecto en el que necesito obtener datos y mostrar una lista de componentes de tarjeta diseñados a medida usando el mapa. Todo funciona bien, pero cuando agrego un nuevo valor a la matriz, creará una nueva tarjeta con los valores que quiero, pero por defecto comienza desde la izquierda.

¿Hay alguna manera de hacer que los nuevos se agreguen al lado derecho?

Así es como se ve ahora

Así es como quiero que se vea (esperado)

También podría comenzar desde el índice 0 desde el lado derecho si eso solucionara el problema.

Tenga en cuenta que ya he intentado establecer la dirección en RTL, pero eso no resuelve el problema de cómo map y mostrar nuevos elementos en la lista.

Código de muestra

 //fetch data function fetchData(){ return data.cards.slice().sort(a, b).(a.toUpperCase()< b.toUpperCase() ? -1 : 1)) } const cardsList = fetchData() <CardList> { cardsList.map( card => ( <Card key={card.id}> {card.name} </Card> )) } </CardList>