How do I get the dynamic path the current path is matched at?

[unbiased-dev]

Example

{
  path: '/',
  element: <App />
  children: [
    {
      index: true,
      element: <Dashboard />
     },
     {
       path: '/foo',
       element: <Foo />
      },
     {
       path: '/foo/:id',
       element: <SingleFoo />
      }
    ]
}

How do I check which route am I matched to from within <App />?
Basically I want this

// at route /foo/5
const matchedPath = useMatchedPath();
// /foo/:id