Dear folks, I'm having trouble understanding why my App Component doesn't get rendered on the browser?

const desc = 'I just learned how to create a React node and render it into the DOM.';
const myTitleID = 'main-title';
const name = 'Guil';




const Header =()=>(
  <header>
    <h1 id={myTitleID}>{ name }'s First React Element!</h1> 
    <p className="main-desc">{ desc }</p>
  </header>
);

const Player = () => {

 return(
   <div className = "player">
     <span className = "player-name">
      Guil
     </span>

   {/* We're calling as if the Counter Component here and that's called Composition*/} 
        <Counter />

   </div>

 );


}


const Counter = () => {
 // retrun keyword within to hold our JSX
 return(

 <div className="counter">
         <button className="counter-action decrement"> - </button>
         <span className="counter-score">35</span>
         <button className="counter-actiion increment"> + </button>

  </div>

 );

}


const App = () => {

  return(
  // A self closing Header tag to call that Header elemnent through composition method
     <div className="scoreboard">
     <Header />


    {/* Players list */} 
     <Player />


     </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);