What does the code snippet to the right output by console.log?

1// This is a React Quiz from BFE.dev 
2
3import * as React from 'react'
4import { useState, useEffect } from 'react'
5import { createRoot } from 'react-dom/client'
6
7function A({ children }) {
8  console.log('A')
9  return children
10}
11
12function B() {
13  console.log('B')
14  return <C/>
15}
16
17function C() {
18  console.log('C')
19  return null
20}
21
22function D() {
23  console.log('D')
24  return null
25}
26
27function App() {
28  const [state, setState] = useState(0)
29  useEffect(() => {
30    setState(state => state + 1)
31  }, [])
32  console.log('App')
33  return (
34    <div>
35      <A><B/></A>
36      <D/>
37    </div>
38  )
39}
40
41const root = createRoot(document.getElementById('root'));
42root.render(<App/>)