using useeffect with react router execute out of order

I was trying to use useEffect in my app.js and setting some data to my redux and using that data in my route page(inside useEffect) resulting me finding this strange behavior unless it is how should be and i am in the wrong D:.
This is a simplified code to show my problem.

In the Code, I have four console.log() and the order in the browser developer console is as follows:

App.js    :7 App
Home.js   :4 Home
Home.js   :6 homeUseEffect
App.js    :9 appUseEffect

the log outside of useEffect runs as normal but inside useEffect the route runs before the app.js which the route is declared in.

app.js

import React, { useEffect } from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
const router = createBrowserRouter([{ path: '/', element: <Home /> }]);
const App = () => {
  console.log('App');
  useEffect(() => {
    console.log('appUseEffect');
  }, []);

  return <RouterProvider router={router}></RouterProvider>;
};

export default App;

home.js

import React, { useEffect } from 'react';
const Home = () => {
  console.log('Home');
  useEffect(() => {
    console.log('homeUseEffect');
  }, []);
  return <div>Home</div>;
};
export default Home;

why the useEffect code in my route runs before my useEffect code in app.js
is it how it should be?
and how can I prevent that?

This behavior works as expected.

/**
 * ------------------ The Life-Cycle of a Composite Component ------------------
 *
 * - constructor: Initialization of state. The instance is now retained.
 *   - componentWillMount
 *   - render
 *   - [children's constructors]
 *     - [children's componentWillMount and render]
 *     - [children's componentDidMount]
 *     - componentDidMount
 *
 *       Update Phases:
 *       - componentWillReceiveProps (only called if parent updated)
 *       - shouldComponentUpdate
 *         - componentWillUpdate
 *           - render
 *           - [children's constructors or receive props phases]
 *         - componentDidUpdate
 *
 *     - componentWillUnmount
 *     - [children's componentWillUnmount]
 *   - [children destroyed]
 * - (destroyed): The instance is now blank, released by React and ready for GC.
 *
 * -----------------------------------------------------------------------------
 */

From componentDidMount doc:

> The componentDidMount() method of child components is invoked before that of parent components.

We also know useEffect(() => []) is equivalent to componentDidMount() lifecycle method.

> defining componentDidMount, componentDidUpdate, and componentWillUnmount together in class components is equivalent to calling useEffect in function components

That's why you get the logs:

App
Home
homeUseEffect
appUseEffect

The function component execution happens in the "render phrase", the effect declared by the useEffect() hook or componentDidMount() method will be executed in the "commit phrase".

See the below diagram: