Syntax Error, but cannot find where! Adjacent JSX elements must be wrapped in an enclosing tag

Hi Below is my code, it continues to tell me I need to wrap elements in closing tags. I feel like im not stupid and have exactly the same amount of closing as opening tags.... Can anyone find the error in this code?

function Application() { return ( <div className="scoreboard"> <div className="header"> <h1>Scoreboard</h1> </div> </div> <div className="players"> <div className="player"> <div className="player-name"> Brandon Zucker </div> <div className="player-score"> <div className="counter"> <button className="counter-action decrement"> - </button> <div className="counter-score"> 33 </div> <button className="counter-action increment"> + </button> </div> </div> </div> </div> ); };

ReactDOM.render(<Application />, document.getElementById('container'));