Why is the routing part not working in React?

Question

React

I have App. Inside it:
1. a custom header component is nested (with links to various project pages)
2. Link with links to other components
2. routing with paths is configured, and they are wrapped in a <BrowserRouter>

Custom PageHeader component, inside which routing is also configured with its links.

Problem: parent component and child. In each, routing is configured for certain links. in both groups, Link changes the url, but only in the parent component they follow the links, while the child pageHeader does not.

Those. clicking on the links inside the main component - we go through the components. When clicking on links inside a child, the transition does not work.
What could be the problem?

It feels like some sort of rendering issue. Or some problem with the fact that the links are set deep inside the child component, while the content that should be displayed due to them is higher in the element hierarchy.
What could be the problem and what solutions are possible?

Sandbox attached:
https://codesandbox.io/s/clever-fire-fkc7i?file=/s...

Answer 1

BrowserRouter in PageHeader - remove.