After an onClick event fires, I call the setInterval function which in turn calls a function to set the value for a variable picked randomly from an array of 4 values (4 different colors). I need to keep track of what values were randomly selected. When I try to access the value of the getter variable returned from the useState hook by pushing it to my colortracker array, I see in the console that it's only storing empty strings in the array. 

I've tried passing the bgCol variable in as a props value. I've tried curly braces around bgCol. Have tried defining my array with the keywords let and var. 

```
function ColoredBox(props){

    return(
      <div style={{backgroundColor: props.color, marginBottom: 20, width: 
       200, height: 200}}>      
      </div>
    );
}

function Button(props){
    const start = () => {
        setInterval(props.startGame, 2000);
        }
    return(
        <button onClick={start} style={{marginBottom: 50}} >Start 
        Game</button>
  );
}

function Game(){
    const [bgCol, setbgCol]= useState('');
    const arr = ['red', 'blue', 'yellow', 'black'];
    const colortracker = [];     
    const handleClick = () => {     

        setbgCol(arr[Math.floor(Math.random()*Math.floor(4))]);
        colortracker.push(bgCol); 
        console.log(colortracker);    

    }
        return(
        <div>
            <ColoredBox color={bgCol} />
            <Button startGame={handleClick} />
        </div>
            );
      }

ReactDOM.render(<Game />,mountNode);

```

Actual output is an array filling up with empty strings as the values for bgCol when I need it to be strings representing the colors picked out of the arr array.