React states and props between classes

1

This is just a component of my app that I want to use for learning react. I am having trouble toggling the state of letter in my Board class that i’m trying to pass down into my squares as a prop on click.

function board(){
  console.log(gameVar.letter);
  gameVar = {
    letter: arguments[1],
    mode: arguments[0]
  }
  
  
  class Square extends React.Component{
    constructor(props){
      super(props); 
      this.state = {};
    }
    
    xo(){
      this.setState({letter: this.props.values})
    }

    render(){
      return(
        <div>
          <button className='boxes' onClick={() => this.xo()}>
            {this.state.letter}
          </button>
        </div>        
      );
    }   
  }
  
  
  class Game extends React.Component{
    constructor(props){
      super(props);
      this.state = {
        letter: undefined
      };
    }
    toggle(){
      let letter = this.state.letter === "O"? "X":"O";
      this.setState({letter: letter});
    }
    
    square() {
      this.toggle();
      return <Square values={this.state.letter} />;
    }
    
    render(){
      return(
        <div className='justify'>
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}
          {this.square()}      
        </div>
      );
    }
  }
  
  
  ReactDOM.render(
  <Game />,
  document.getElementById('root')
  );
}