Using Expo React js and trying to make a personal blackjack app. I am unsure how to make the render display update after the dealer/player choses to hit.
Current Code:

 const renderDealer = () => {
    let dealerHand = [generateCard(), generateCard()];
    let playerHand = [generateCard(), generateCard()];
    let dealerValue = calculateHandValue(dealerHand);
    let playerValue = calculateHandValue(playerHand);
  const Logic = () => {
    while (dealerValue < 17) {
        dealerHand.push(generateCard());
        dealerValue = calculateHandValue(dealerHand); 
    }
  }
  Logic()

    return (
      <View style={styles.Dealercontainer}>
        <View style={styles.topcardContainer}>
          {/* Display dealer's cards */}
          {dealerHand.map((card, index) => (
            <Card
              key={card.rank + card.suit}
              rank={card.rank}
              suit={card.suit}
              style={{ alignItems: 'center' }}
            />
          ))}
        </View>

        <View style={styles.bottomcardContainer}>
          {/* Player Cards */}
          {playerHand.map((card, index) => (
            <Card
              key={card.rank + card.suit}
              rank={card.rank}
              suit={card.suit}
              style={{ alignItems: 'center' }}
            />
          ))}
        </View>

Here is the current code:

This is the current output:

Expo Display
Right now, it is executing the function to chose to hit or stand at render time. This makes it so that the player can’t know what the initial cards were and see them update in real time. Also, with this there doesn’t seem to be a way to implement asking the player and then reflecting the changes.

Purpose: I want to make the display update after the dealer or player choses to hit. I want to be able to see the cards coming in one by one.

What is the best way to implement this? The use state function’s errors is very confusing for me.

Any Help is appreciated!