React setState and array.push not working

This is a simple memory game. There is an array of cards on the page if the user clicks the same picture twice the game gets over. Everything works perfectly except when I add setState the array.push stops pushing the new item in the array.

const Main = () => {
    
//initial array which I map
    const [picArray, setPicArray]= useState([1, 2, 3, 4, 5, 6])
     let userArray = [];
      
    //everytime picture is clicked array is shuffled
    const shufflePicArray = () =>{
        return picArray.sort( () => Math.random() - 0.5)
    }

//onclick
    const handleClick = (id) =>{
        let matchedEl = userArray.find(el => el == picArray[id])
   
        if(matchedEl){
            alert('game finished')
            userArray = [];
        } else {
            userArray.push(picArray[id])
            let shuffledArray = shufflePicArray();
        //if I skip this setState, then the item gets pushed in the userArray. If I keep the setState, then items don't get pushed in the array and I see only one item in the array like the setState regrshed the userArray. Here suffledarray has nothing to do with userArray.
         **setPicArray([...shuffledArray])** 
        }
        
    }```

help please!