`location.state` in dependency of `useEffect` not getting triggered for the initial rendering of com-CodePudding

I have a parent component which is having Outlet for sub routes.

I wanted to pass the data from the parent component (App.js) to the component rendered by Outlet for the default Link (Test.js).

For which, I used the state object of location and passed the data from parent Component.

<Link to="" state={{ data }}>
  Render test
</Link>

Although on initial render, it is still null in child component (Test.js), but if I navigate to some other route (route: /dummy, component : Dummy.js) within that parent and come back to Test.js components route, I am able to see value in the location.state.

Codesandbox link for more clarity: