So I'm new to react and for the life of me I can't figure out how to make something like this: tic-tac-toe grid

I'm having trouble making a row component that renders a div with three different square components, distributed horizontally across the div. When I compile my code all the squares in a row are fixed to the same spot. How do I fix this, please?

my current code:

App.css

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

  display: flex;

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

} */

Square.js

import React from 'react';
import ReactDOM from 'react-dom';

export function Square(props){
    // Square is rendered by App

    return(
        <div >
            <button className='Square'> X </button>
        
        </div>
               
    );
}

App.js

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

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

export default App;

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>
    )
}