state has no need to be a callback as it is re rendered on boardChange. Basically you are adding an unnecessary step

src/TicTacToe/Root.tsx

@@ -104,7 +104,7 @@ function TicTacToe() {
           const callback = () => {
             playTurn(index);
           };
-          return <TicTacToeCell getState={getState} callback={callback} />;
+          return <TicTacToeCell state={gridState[index]} callback={callback} />;
         })}
       </div>
     </div>
@@ -112,21 +112,21 @@ function TicTacToe() {
 }
 
 interface CellProps {
-  getState: () => number;
+  state: number;
   callback: () => void;
 }
 
-function TicTacToeCell({ getState, callback }: CellProps) {
+function TicTacToeCell({ state, callback }: CellProps) {
   function handleClick() {
     callback();
   }
 
   return (
     <div
-      className={`TicTacToeCell ${getStateClass(getState())}`}
+      className={`TicTacToeCell ${getStateClass(state)}`}
       onClick={handleClick}
     >
-      <p>{getStateChar(getState())}</p>
+      <p>{getStateChar(state)}</p>
     </div>
   );
 }