react hook stop updating itself

I am making a roulette game, at this point the code print a random number, saves it and then generates the random number again. There are several states that print other info like win in first line, win in second line etc. The code works for some time but suddenly stops updating itself, I have tried with a timeout (commented code) but the same happens. Can anybody help me on this?

const getRandomIntInclusive = (min, max) =>{
    const randomBuffer = new Uint32Array(1);
    window.crypto.getRandomValues(randomBuffer);

    let randomNumber = randomBuffer[0] / (0xffffffff + 1);

    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(randomNumber * (max - min + 1)) + min;
}

const numberColors = {
    black : [15, 4, 2, 17, 6, 13, 11, 8, 10, 24, 33, 20, 31, 22, 29 , 28 , 35, 26],
    red : [32, 19, 21 , 25, 34, 27, 36, 30, 23, 5, 16, 1, 14, 9, 18, 7, 12, 3],
    green : [0]
}
const firstLine = [
    3, 6, 9, 12, 15, 18, 21, 24, 27, 30, 33, 36 
]
const secondLine = [
    2, 5, 8, 11, 14, 17, 20, 23, 26, 29, 32, 35
]
const thirdLine = [
    1, 4, 7, 10, 13, 16, 19, 22, 25, 28, 31, 34

]
const cero = [0];

/**Muestra los resultados de una ruleta implementada en js */
const Roulette = props =>{
    const useStyles = makeStyles({

    });
    const classes = useStyles();
    const [wins, setWins] = useState({firstLine : [], secondLine : [], thirdLine : [], cero : []});
    const [randomNumber, getRandomNumber] = useState(()=>getRandomIntInclusive(0,36));
    const [numberResults, setNumberResults] = useState([]);

    useEffect(()=>{
        //añado el número a la colección

//REVISAR QUE EL NÚMERO ESTÉ EN LA LÍNEA Y DE SER ASÍ SUMAR LAS VECES QUE SE VA GANANDO
const updatedValue = {...wins};

        if(firstLine.includes(randomNumber)){
            //setWins(wins.firstLine.push(randomNumber));
            updatedValue.firstLine.push(randomNumber);
            setWins(updatedValue);
        }
        if(secondLine.includes(randomNumber)){
           // setWins(wins.secondLine.push(randomNumber));
         updatedValue.secondLine.push(randomNumber);
            setWins(updatedValue);
        }
        if(thirdLine.includes(randomNumber)){
           updatedValue.thirdLine.push(randomNumber);
           setWins(updatedValue);
           
        }
        if(cero.includes(randomNumber)){
            updatedValue.cero.push(randomNumber);
            setWins(updatedValue);
            
         }

         const numberResultsUptadedValue = [...numberResults];
         numberResultsUptadedValue.push(randomNumber);
         setNumberResults(numberResultsUptadedValue);


}, [randomNumber]);

    useEffect(()=>{
         const random = getRandomIntInclusive(0,36);
       /*const timeout = setTimeout(()=>{
            getRandomNumber(random);  

            console.log('randomNumber generated')

        }, 100);*/
        getRandomNumber(random); 
       // return ()=>clearTimeout(timeout);
    },[numberResults])

   


    
    
    return(
        <Grid container direction='column' >
                <Typography variant="h3">Roulette</Typography>
                <Grid container>
                <Typography variant="h5">Random Number: </Typography>
                <Typography variant="body1" style={{ color : 'yellow'}}> {randomNumber}</Typography>
                <Typography variant="h5">Length </Typography>
                <Typography variant="body1" style={{ color : 'yellow'}}> {numberResults.length}</Typography>
                <Typography variant="h5">Wins in first line </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.firstLine.length}</Typography>
                <Typography variant="h5">Wins in second line </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.secondLine.length}</Typography>
                <Typography variant="h5">Wins in third line </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.thirdLine.length}</Typography>
                <Typography variant="h5">Wins in cero </Typography>
                <Typography variant="body1" style={{ color : 'orange'}}> {wins.cero.length}</Typography>
                </Grid>
                <Grid container>
                <Typography variant="h5">List of Numbers : </Typography>
    {numberResults.length > 0 ? numberResults.map((el)=>{
           return Object.keys(numberColors).map((currentColor)=>{
                if(numberColors[currentColor].includes(el)){
                  let  winBet = null;
                  let dinamicStyle = {  color : currentColor, border : 'solid 1px black', width : '20px', height : '20px' }
                    //const winBet = firstLine.includes(el) ?  <InsertEmoticonIcon /> : null;
                    if(firstLine.includes(el) ){
                        winBet = <InsertEmoticonIcon /> ;
                        dinamicStyle.backgroundColor = 'yellow';
                    }
                    return(
                        <React.Fragment>
                        <Typography key={uuidv4()} align='center' variant="body1" style={dinamicStyle}> {el}  </Typography>
                        </React.Fragment>
                    )
                }
                return null; 
              
           }
);
    }) : null}
                </Grid>
                
        </Grid>
    )
}

export default Roulette;

I was sable to solve this by checking if the last value in the numbersArray is the same as the last random number generated (as commented by Jason in the comments section), if it is, change a boolean state that is in the dependences list, firing the update again.

...[randomNumber, effectOnSameValue]);

 useEffect(()=>{
         const random = getRandomIntInclusive(0,36);
        const last = numberResults[numberResults.length - 1]
        getRandomNumber(random); 

        if(last === random){
            runEffectOnSameValue(!effectOnSameValue);
        }
    },[numberResults])