Block function when state is not equal to false

I have small problem with my Tic-tac-toe app. When I'm playing against AI (computer) and when I win, computer makes another move and it is not supposed to happen. I just want to block this function, so I can prevent this problem. It sounds easy but I swear to god, I've tried everything and nothing blocks that function.

When you start the app, you have 2 options. Player vs player and player vs computer. Choose player vs. computer..

Game will start and you are the first player on draw. After you click, computerMove() will be fired and computer will randomly pick empty column a insert there it's mark (O). Problem is when you win, computer doesn't stop and pick another one.

I've tried to prevent it like this

in checkWinner function, which is called after every click

      if(xCount === 3){
        setWinner('X WINS!');
        displayWinner();
        setWinnerCount(prevState => ({
          ...prevState,
          player1:prevState.player1 + 1
        }));

        setPlayerVsPlayer({
          AI:false,
          AImove
        })
        return;
      }

if xCount of oCount == 3, winner state is set from false to 'X wins!' ,'O wins!' or 'Draw!' .. depends on who is the winner.

Or in computerMove function

if (emptyCols.length > 0 && winner === false) {
   //run whole computer move function .. i.e. pick random column and insert here O, etc..
}

So logically, If I win, computer shouldn't be able to make one more move because winner state is not false but it's value is 'X Wins!'..

Can you please someone look at it? I don't really know how to prevent this...

https://codesandbox.io/s/cold-shape-xg7l7?file=/src/App.js