Update page title inside outlet component

[AmirHosseinKarimi]

I used a components inside nested route and update the page title via useEffect. (Lets call it child component)
The parent route has its own useEffect to update page title and will render the child component via useOutlet hook.
The problem is child component will mount at first and update the page title, then the parent component will mount and override the page title.

I'm trying to find a way to fix this issue and update the page title from child component.

Minimal Example: https://vnfrjr.csb.app/child
Code: https://codesandbox.io/s/sleepy-kalam-vnfrjr?file=/src/App.js