Props not being passed through Route element with React Router v6

Question

export default function App() {
    return (
        <Router>
            <Routes>
                    <Route path="/" element={<App />} />
                    <Route path="roles" element={<Dashboard role={true}  />} />
            </Routes>
        </Router>


    )

}

Console logging props.role from the Dashboard component gives me undefined. I've looked at 20 threads on this and can't figure out what I'm doing wrong here.

Dashboard component in jsfiddle cause Stackoverflow won't let me edit the post with all of it in here. It's a template from Material UI

https://jsfiddle.net/j4xo0yuv/