Tic Tac Toe game in react

Game.tsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const rowStyle = {
  display: 'flex'
}

const squareStyle = {
  'width': '60px',
  'height': '60px',
  'backgroundColor': '#ddd',
  'margin': '4px',
  'display': 'flex',
  'justifyContent': 'center',
  'alignItems': 'center',
  'fontSize': '20px',
  'color': 'white'
}

const boardStyle = {
  'backgroundColor': '#eee',
  'width': '208px',
  'alignItems': 'center',
  'justifyContent': 'center',
  'display': 'flex',
  'flexDirection': 'column',
  'border': '3px #eee solid'
}

const containerStyle = {
  'display': 'flex',
  'alignItems': 'center',
  'flexDirection': 'column'
}

const instructionsStyle = {
  'marginTop': '5px',
  'marginBottom': '5px',
  'fontWeight': 'bold',
  'fontSize': '16px',
}

const buttonStyle = {
  'marginTop': '15px',
  'marginBottom': '16px',
  'width': '80px',
  'height': '40px',
  'backgroundColor': '#8acaca',
  'color': 'white',
  'fontSize': '16px',
}

function Square({ player, play }) {
  return (
    <div
      onClick={play}
      className="square"
      style={squareStyle}>
      {player}
    </div>
  );
}

const createBoardState = () => {
  return [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
  ];
}

function Board() {
  const [nextPlayer, setNextPlayer] = useState('X');
  const [winner, setWinner] = useState('');
  const [board, setBoard] = useState(createBoardState);

  const play = (outerIndex, innerIndex, player) => {

    if (board[outerIndex][innerIndex] || winner) {
      return;
    }


    board[outerIndex][innerIndex] = player;

    setBoard(board)
    setNextPlayer((nextPlayer) => nextPlayer === "X" ? "O" : "X");
    if (checkWinner(player)) {
      setWinner(player);
    }
  }

  const reset = () => {
    setBoard(createBoardState);
    setWinner("");
    setNextPlayer("X");
  }


  const checkWinner = (player) => {
    for (let i = 0; i < 3; i++) {
      if (board[i][0] === player && board[i][1] === player && board[i][2] === player) {
        return true;
      }

      if (board[0][i] === player && board[1][i] === player && board[2][i] === player) {
        return true;
      }
    }

    if (board[0][0] === player && board[1][1] === player && board[2][2] === player) {
      return true;
    }

    if (board[0][2] === player && board[1][1] === player && board[2][0] === player) {
      return true;
    }

    return false;
  }

  return (
    <div style={containerStyle} className="gameBoard">
      <div id="statusArea" className="status" style={instructionsStyle}>Next player: <span>{nextPlayer}</span></div>
      {winner ? <div id="winnerArea" className="winner" style={instructionsStyle}>Winner: <span>{winner}</span></div> : null}
      <button style={buttonStyle} onClick={reset} >Reset</button>
      <div style={boardStyle}>
        {
          board.map((innerBoard, outerIndex) => (
            <div className="board-row" style={rowStyle} key={`outer-${outerIndex}`}>
              {innerBoard.map((player, innerIndex) => (
                <Square
                  key={`${outerIndex}-${innerIndex}`}
                  player={player}
                  play={() => play(outerIndex, innerIndex, nextPlayer)}
                />
              )
              )}
            </div>)
          )
        }
      </div>
    </div>
  );
}

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  );
}

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);