почему кнопка меняет положение на клик?

Question

Я создаю TicTacToe с помощью React Hook. Пока TicTacToe работает нормально, кнопки меняют положение при нажатии. Изображение 1 - это исходное игровое поле, а изображение 2 - после нажатия на кнопку! он идет вниз. Если я нажимаю последовательно три кнопки, он переходит в предыдущую позицию (изображение 3).

tictactoe

Я не хочу, чтобы кнопки меняли положение.

мой код выглядит следующим образом:

import React, {useState} from 'react';

    import Square from './Square';
    function Board(){
        const [boardSquares, setBoardSquares] = useState(Array(9).fill(null));
        const [xIsNext, setXIsNext] = useState(true);

        const handleClick = index =>{
            const squares = [...boardSquares]; 

            if( whoIsTheWinner(boardSquares) || squares[index]) return;       
            squares[index] = xIsNext ? "X" : "O";
            setBoardSquares(squares);
            setXIsNext(!xIsNext);


        };
           const renderSquare = (index) => {
            return <Square value={boardSquares[index]} onClick={()=>handleClick(index)}/>
        };
       let status ;
        const winner = whoIsTheWinner(boardSquares);

        status = winner ? 
        `Winner is: ${winner}` :
        `Next player: ${xIsNext ? "X" : "O"}`; 

        function whoIsTheWinner(squares){
                const winningLine = [
                    [0, 1, 2],
                    [0, 3, 6],
                    [0, 4, 8],
                    [1, 4, 7],
                    [2, 5, 8],
                    [3, 4, 5],
                    [6, 7, 8],
                    [0, 4, 8]
                   ];
                   console.log(winningLine)
                   for (let i=0; i < winningLine.length; i++){
                       const [a,b,c]=winningLine[i];
                       if (squares[a] && squares[a] === squares[b] && squares[b]===squares[c])
                       return squares[a]; 
                   } 

                return null;
                };

        return(
            <div>
                <div>               
                   {status}
                </div>
                <div>
                    {renderSquare(0)}
                    {renderSquare(1)}
                    {renderSquare(2)}
                </div> 
                <div>
                    {renderSquare(3)}
                    {renderSquare(4)}
                    {renderSquare(5)}
                </div> 
                <div>
                    {renderSquare(6)}
                    {renderSquare(7)}
                    {renderSquare(8)}
                </div>  

            </div>
        );
    }

    export default Board;

код CSS:

.button {
  width: 150px;
  height: 150px;
  background-color: greenyellow;
  margin: 0;
  padding: 0;
}

.button:active {
  background-color: grey;
}

.button:hover {
  background-color: palegreen;
}