Why is there such a scheme in React?

Question

React

Code from the React documentation:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

Result: Hello
, Sara
Hello , Cahal
Hello , Edite After all, the name Sara is passed through {props.name} to the Welcome function, namely to the line: , and having already connected in the Welcome function, they eventually become Hello, Sara And if you write in ReactDOM.render as in the example, then logically it should have output on the screen simply: Sara. But for some reason it's displayed on the screen Hello, Sara Explain why React has such a scheme? <App /><Welcome/>return <h1>Hello, {props.name}</h1>;
<App />

Answer 1

Renders what is returned from the App() functional component.
App() renders a div inside which renders 3 times what the Welcome() component will return, which in turn returns a welcome title.
Here is the order. What is the problem?
If we render the Welcome tag through ReactDOM, we will get one title with a greeting instead of three