Array disappears after a few clicks with an undefined error - React

Question

I'm trying to make a simulation of a blackjack hand - first user get two random cards, and with each 'hit' they get another one, however after a few 'hit' the app crashes and the 'undefined' error comes up in (array is undefined therefore can't get length). I've tried to save the deck again in the original shuffle, tried putting it all in one, however I can never get it to fully work.

I suspect it's something to do with useState being used incorrectly, however I'm not sure how to fix it. Here's my code:

import {useState, useEffect} from 'react'
import Card from '../components/Card';
import Total from '../components/Total';
import {deckArray} from '../utils/data'

export default function Home(){
    const initialHand = 2
    const [dealCards, setDealCards] = useState(false)
    const [isStarted, setIsStarted] = useState(false)
    const [isReset, setIsReset] = useState(false)
    const [hand, setHand] = useState(initialHand)
    const [deck, setDeck] = useState(deckArray)
    const [total, setTotal] = useState(0)
    
    const [usersCards, setUsersCards] = useState([])

    function shuffle(deck){
        console.log("shuffle called")
        setIsStarted(true)
        let i = deck.length;

        while (--i > 0) {
            let randIndex = Math.floor(Math.random() * (i + 1));
            [deck[randIndex], deck[i]] = [deck[i], deck[randIndex]];
          }

        setUsersCards(deck.slice(-initialHand))
        console.log(usersCards)
        console.log(deck)
    }

    useEffect(() => {
        if(dealCards===true){
            
            const randomCard = deck[Math.floor(Math.random()*deck.length)];
            const newCardsArray = deck.filter(el => el.index !== randomCard.index)
            const chosenCardArray = deck.filter(el => el.index === randomCard.index)

            const chosenCard = chosenCardArray[0]

            setDeck(newCardsArray)
            setUsersCards(prevCards => [...prevCards, chosenCard])
            console.log(newCardsArray.length)
            
            setDealCards(false)

        }
    }, [usersCards, dealCards, deck])

    useEffect(() => {
        if(isReset){
            setUsersCards([])
            setDeck(shuffle(deckArray))
            setDealCards(false)
            setTotal(0)
            setIsStarted(true)
        } 
        setIsReset(false)
    },[isReset, setIsReset])

    useEffect(() => {
        if(total>=22){
            setIsStarted(true)
            setIsReset(true)
            setDeck(shuffle(deckArray))
        }
    }, [total, setTotal])

    return (
        <>
            {isStarted ? <>
            <Total usersCards={usersCards} total={total} setTotal={setTotal}/>

            <Card usersCards={usersCards} />

            <button onClick={() => setDealCards(true)}>HIT</button>
            <button>STAND</button>
            <button onClick={() => setIsReset(true)}>START OVER</button>
            </> : 
            <>
            <p>Game over!</p>
            <button onClick={() => shuffle(deck)}>PLAY AGAIN</button></>}
        </>
    )
}

any help much appreciated!