Trying to make a tic-tac-toe app, why doesn’t my component work as expected?

quick question on reactjs. So I’m new to react and I’m trying to make a tic-tac-toe application.

Currently, this is what I have:
App.js:

import logo from './logo.svg';
import './App.css';
import { Row } from './components/Row';
import {Board} from './components/Board'

function App() {
  // App renders Row
  return (
    <div>
      <Board />
    </div>
    
  );
}

export default App;

Board.js

import React from "react";
import { ReactDOM } from "react";
import { Row } from "./Row";

export function Board() {
    return (
        <div className="Board">
            <Row />
            <Row />
            <Row />
        </div>
    )
}

Row.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Square } from './Square';

export function Row() {

    return(
        <div className='Row'>
            <Square />
            <Square />
            <Square />
        </div>
    )
}

Square.js

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

export function Square(props){
    // Square is rendered by App
    const [currLetter, changeLetter] = useState(" ");

    function toggleLetter(str) {
        if(str === " ") {return "X";}
        else if(str === "X") {return "O";}
        else if(str === "O") {return "X";}
    }

    return(
        <div >
            <button onClick={() => changeLetter(toggleLetter)} className='Square'> {currLetter} </button>
        
        </div>
               
    );
}

and it works well, but I’m wondering why it doesn’t work when I write Square.js like this:

export function Square(props){
    // Square is rendered by App
    const [currLetter, changeLetter] = useState("X");

    function toggleLetter(str) {
        if(str === "X") {changeLetter("O");}
        else if(str === "O") {changeLetter("X");}
    }

    return(
        <div >
            <button onClick={toggleLetter} className='Square'> {currLetter} </button>
        
        </div>
               
    );
}

why can’t onClick just take in toggleLetter as is? it’s a function right?

second question
this is what my css looks like:

.Board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  
  /* width: 55%;
  height: 55%; */
  margin-top: 18%;
}


.Row {
  text-align: center;
  /* position: absolute; */
  /* left: 35%;
  right: 50%;
  top: 25%;
  
  width: 25%;
  height: 25%; */

  display: flex;
  flex-direction: row;
  justify-content: center;

  
}
.Square {
  /* position: absolute; */
  
  width: 70px;
  height: 70px;
  border-color: #99ccff;
  text-align: center;
  font-size: xx-large;
  font-family: 'Courier New', Courier, monospace;
}
/* .Row {

} */

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffcccc;
}
html {
  height: 100%;
}

What I wanted to do was make sure the board is centred in body, and therefore centred on the page. As it is, it is centred on the page but then the body is moved down. When I inspect the page, the top edge of the body is moved down to the same level of the top edge of board, as opposed to the body being where it was by default and the board being in its centre. How do I fix this?

what it looks like:

how-it’s-going