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 question
const renderQuestions = () => {
  for (cardNum; cardNum < todaysRevision.length;) {
    return (
      <Question key={todaysRevision[cardNum]} card={todaysRevision[cardNum]}/>
    )
  }
}

// Question const
const 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 question
const updateCardNum = () => {
  cardNum++;
  console.log('new card: ' + cardNum)
  // setProgress(cardNum/todaysRevision.length);
}

Thank you!!