title: Array inside of React function component won't update
body: <p>I'm working on a project which is a Blackjack game in react. And I have an array inside of a function component which updates with a function that adds cards to the array. The dealCards function looks like this.</p>
  <pre><code>export default function dealCards(index: number, hand: Cards[]) {
      for (let i = 1; i &lt;= index; i++) {
          hand.push(deck[0]);
          deck.splice(0, 1);
      }
      return hand;
  }
  </code></pre>
  <p>I'm calling the function when the app first loads up. That is working just fine for right now. However when I call dealCards function inside of a Button onClick function component the array isn't updating inside the UI. The Button function component looks like this.</p>
  <pre><code>&lt;Button variant={'success'} onClick={() =&gt; {
                      dealCards(1, playerHand);
                  }}&gt;Hit&lt;/Button&gt;
  </code></pre>
  <p>I tried debugging my application and the function fires perfectly the problem is that it won't up date the array inside of the app function component.</p>