consider I have a below app structure

const App = () => {
    return <div><Header /><Main/><Footer/></div>
}
const Header = () => {
    return <>Header</>;
}
const Main= () => {
    return <>Main</>;
}
const Footer= () => {
    return <>Footer</>;
}

Using App component

<App><div>A</div><App/>

When the above line is encountered in react it should create element looking something like

{
  $$typeof: Symbol(react.element),
  type: ƒ App(),
  key: null,
  ref: null,
  props: {
    children: {
      $$typeof: Symbol(react.element),
      type: "div",
      key: null,
      ref: null,
      props: {
        children: "A"
      },
      ...
    }
  },
  ...
}

My question is now when react calls App component and go on to create elements for App components children. How are they created in this tree?

Further if we use props.children inside App component where and when is that created in element tree?

I did not try anything, I dont know how resultant tree should look like.