Change parameter of one object in array based on user's choice in React

Question

I'm trying to write a simple app that will simulate a hand in blackjack (previous question here that will let the user decide if they want to get 1 or 11 points if they get an ace. Now, because I have an array of cards where I set the values of the cards (for example:

export const deckArray = [
    {
      suits: "Heart",
      card: "A",
      color: "red",
      index: "1",
      unicode: "",
      value: 0
    },
    {
      suits: "Heart",
      card: "2",
      color: "red",
      index: "2",
      unicode: "",
      value: 2
    },
    {
      suits: "Heart",
      card: "3",
      color: "red",
      index: "3",
      unicode: "",
      value: 3
    }]

and so on, I need to change the value of the ace that is being received by the user.

I used the code from the previous answer like so:

import {useState, useEffect, Fragment} from 'react'
import Card from '../components/Card';
import Total from '../components/Total';
import Popup from '../components/Popup'
import AceSetterModal from '../components/AceSetterModal';
import {shuffle} from '../hooks/shuffleCards'
import {deckArray} from '../utils/data'

export default function Home(){
    const startHandSize = 2
    const lowAce = 1
    const highAce = 11
    const goal = 21

    const [starterDeck, setStarterDeck] = useState(shuffle(deckArray))
    const [howManyDealt, setHowManyDealt] = useState(startHandSize)
    const [triggerPopup, setButtonPopup] = useState(false)

    const [checker,setChecker] = useState(startHandSize);
    const [isStarted, setIsStarted] = useState(false)
    const [aceToSet, setAceToSet] = useState(null)

    const deal = () => {
        setHowManyDealt(startHandSize)
        setStarterDeck(shuffle(deckArray))
        setChecker(0)
        //setTotal(0)
    }

    if(isStarted){
        deal()
    }

    const hit = () => !bust && setHowManyDealt(prev => prev + 1)

    const usersCards = starterDeck.slice(-howManyDealt)


    var total = usersCards.reduce((a, e) => a + e.value, 0);

    const bust = total > 21;

    const handleAceSet = value => {
        console.log("handleAceSet called")
        total += value
        setStarterDeck(starterDeck => {
            const i = starterDeck.findIndex(e => e.card === aceToSet.card)
            return [
                ...starterDeck.slice(0, i),
                {...aceToSet, value},
                ...starterDeck.slice(i + 1)
            ]
        })
        console.log(starterDeck)
        setAceToSet(null)
    }

    return(
        <div>
        {aceToSet ?
          <AceSetterModal 
          handleSetLow={() => handleAceSet(lowAce)}
          handleSetHigh={() => handleAceSet(highAce)}/> : 
          <Fragment>
          <button onClick={deal}>DEAL</button>
            <button disabled={bust} onClick={hit}>HIT</button>
            <button disabled={bust}>STAND</button>
            <Total total={total} usersCards={usersCards}/> 

        {usersCards.map(card => (
            <Card key={card.index}
                handleAceSet={() => setAceToSet(card)}
                card={card}
            />
        ))}
          </Fragment>}
        </div>
    )
}

With the code below, I can get the index of the ace, but it is still not updating the ace, and, more importantly, the total. I also tried just adding the chosen value to the total, but it is not updating on the screen.