Why are props not being passed through the router?

Question

JavaScript

Good afternoon. I'm just starting to learn react and got into an unpleasant situation.
Task: to pass props through the component hierarchy from top to bottom. Everything is transferred between neighboring components, but since the course is a bit outdated and react is changing fast, I can't do what is done in the course.
I am rendering an object in index.js and trying to pass it through props.

ReactDOM.render(
   <React.StrictMode>
      <BrowserRouter>
         <App />
      </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root')
);

in app.js I make routes:

<>
         <Routes>
            <Route path="/" element={<Layout />}>
               <Route index element={<Home/>} />
               <Route path="/cases" element={<Cases />} />
               <Route path="/works-all" element={<WorksAll />} />
               <Route path="*" element={<NotFoundPage />} />
            </Route>
         </Routes>
      </>

in layout I put a component for output - outlet:

<div className={app.container}>
         <div className={app.page}>
            <div className={app.info}>
               <Card />
               <About />
            </div>
            <div className={app.content}>
               <Greeting />
               <Outlet />
            </div>
         </div>
      </div>

and props should get into the cases component through routing in app.js:

<div className={`${app.block} ${cases.cases}`}>
         
         <div className={app.title}>
            <h2 className={app.header}>
               Cases
            </h2>
            <NavLink className={ `${app.more} ${cases.more}` } to="/cases">
               View all cases
            </NavLink>
         </div>
         <ul className={cases.list}>
            <Case  />
         </ul>
      </div>

I believe that I have a fundamental mistake, I don’t know something, or this is done in a different way, because the data does not pass only through routing in app.js, everything works ok in other parts of the application. router version 6. Tell me, please, should props be transmitted according to this scheme, or is it done differently in modern react?

Answer 1

I don't see props in your code)
const header = ( props ) => {
what's inside
};