REACT how come when we create a function called "App" the return html runs but doesn't work if any other?

Question

How come in react when you write a function called App the render will render the HTML contents in it, but will not render if its called something else like example function test instead of function app? why is that?

function App() {
    return (
        <div>
        <h1>hello test</h1>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));  // this renders hello test because its called App






function test() {
    return (
        <div>
        <h1>hello test</h1>
        </div>
    );
}

ReactDOM.render(<test />, document.getElementById("root"));  // this does not render hello test because its called test, why is that?