The code does not work. Where did I make a mistake?

const gracze = [

 {
    name: "Guil",
    score: 50,
    id: 1
  },
  {
    name: "Treasure",
    score: 85,
    id: 2
  },
  {
    name: "Ashley",
    score: 95,
    id: 3
  },
  {
    name: "James",
    score: 80,
    id: 4

  }

]



function Header(props) {

  return (

  <header>
    <h1>{props.title}</h1>
    <span className="stats"> Players: {props.playersNumber}</span>
  </header> 

);
}

const Player = (props1) => {
  return (
    <div className="player">
      <span className="player-name">
        {props1.name}
      </span>

      <Counter counter1={props1.score}/>
    </div>
  );
}

class Counter extends React.Component {
  render() {

    return (

      <div className="counter">
        <button className="counter-action decrement"> - </button>
        <span className="counter-score"> {this.counter1} </span> 
        <button className="counter-action increment"> + </button>
      </div>

    );
  }  
}


const App = (alejazda) => {
  return (

    <div className="scoreboard">
      <Header 
            title="My Scoreboard" 
            playersNumber={alejazda.poczatkowigracze.length} 
       />

      {/* Players List */}
     {alejazda.poczatkowigracze.map ( gracz =>

      <Player 
          name={gracz.name} 
          score={gracz.score}
          key={gracz.id.toString()}
     /> 



      )}
    </div>
  );
}


ReactDOM.render(
  <App poczatkowigracze={gracze}/>,
  document.getElementById('root')

);