I am following the React tictactoe tutorial https://react.dev/learn/tutorial-tic-tac-toe. I added in a clear button/function, but it doesn’t do anything. Does anyone know why?

import React from 'react';
import { useState } from 'react';


function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

function Board({squares, onPlay }) {
  function handleClick(i) {
    if (squares[i]) {
      return
    }

    const nextSquares = squares.slice();
    nextSquares[i] = "X"
    onPlay(nextSquares);
  }
  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
}

export default function Game() {
  const [currentMove, setCurrentMove] = useState(0);

  const [history, setHistory] = useState([Array(9).fill(null)]);
  let currentSquares = history[currentMove];
  function handlePlay(nextSquares) {
      const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
      setHistory(nextHistory);
      setCurrentMove(nextHistory.length - 1);
  }
  function clear() {
    currentSquares = [Array(9).fill(null)]
  }
  return (
    <div className="game">
      <div className="game-board">
        <Board  squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <button onClick={() => clear()}>CLEAR</button>
      </div>
</div>