Is the adaptation done correctly from router version @5 to @6?

Question

React

Yesterday I got an error when I started npm

node:internal/modules/cjs/loader:488
      throw e;
      ^
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in /.../indreams/react1/node_modules/postcss-safe-parser/node_modules/postcss/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:416:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:669:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/.../indreams/react1/node_modules/postcss-safe-parser/lib/safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

decided to create a new clean project

npx create-react-app react21

after the necessary packages were installed, the error began to be reproduced

Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

index.js

ReactDOM.render(
            <BrowserRouter>
                <Provider store={store}>
<App />
            </Provider>
            </BrowserRouter>,
        document.getElementById('root'));

app.js

const App = (props) => {
  return(
    <div className='app-wrapper'>
  <Header />
  <Navbar />
  <div className='app-wrapper-content'>
    <Route path='/dialogs'
           render={ () =>  <DialogsContainer
        />}
    />
    <Route path='/profile'
           render={ () => <Profile
    />}
           />
    <Route path='/users'
      render={ () => <UsersContainer />}
    />
    <Route path='/settings'
           render={ () => <Settings />}
    />
  </div>
    </div>
  );
}

after rework it turned out like this

index.js

ReactDOM.render(
            <BrowserRouter>
                <Provider store={store}>
<App />
            </Provider>
            </BrowserRouter>,
        document.getElementById('root'));

app.js

<Routes>
      <Route path="/dialogs" element={<DialogsContainer />} />
      <Route path="/profile" element={<Profile />} />
      <Route path="/users" element={<UsersContainer />} />
      <Route path="/settings" element={<Settings />} />
</Routes>

Is the adaptation done correctly from router version @5 to @6?