React Native - how can I render the next component in a loop onPress?

I'm trying to render the next Question card in a loop when the card is tapped, but my current solution isn't working. The first Question is shown correctly, but according to console, when I tap it, cardNum is updated, but the loop itself doesn't move to the next cardNum - I think this is because the component hasn't finished rendering if that makes sense. How can I force the component to stop rendering? Or is there another method?

My current code:

let cardNum = 0// renders each questionconst renderQuestions = () => {  for (cardNum; cardNum < todaysRevision.length;) {    return (<Question key={todaysRevision[cardNum]} card={todaysRevision[cardNum]}/>    )  }}// Question constconst Question = (card: any) => {  // if it is a new card, simply allow the student to learn it without being quizzed    return(<View>        {          card.card.masteryLevel === 0 ?<TouchableOpacity style={styles.question} onPress={() => updateCardNum()}><Text style={styles.newCard}>{card.card.chinese}</Text><Text>{pinyin(card.card.chinese)}</Text><Text>{card.card.english}</Text></TouchableOpacity>          :<Text/>        }</View>    )}// move to the next questionconst updateCardNum = () => {  cardNum++;  console.log('new card: '+ cardNum)  // setProgress(cardNum/todaysRevision.length);}

Thank you!!