Code example showed in a challenge (React components combination)

Hi,
in this challenge, it is discussed the way to combine several React components by creating a parent component App that renders the following:

return (
 <App>
  <Navbar />
  <Dashboard />
  <Footer />
 </App>
)

I am stuck with this <App></App>. I don’t see why it is not <div></div> instead.

Could someone explain it to me?

Why do you think it should be <div></div>?

As explained in previous challenges, JSX must return single elements. Then, <div></div> is usually used to nest more complex JSX as I understood.
In the code editor of this challenge, for example :

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>I am the parent</h1>
        { /* Change code below this line */ }


        { /* Change code above this line */ }
      </div>
    );
  }
};