I have two separate layout in a app called Admin Layout and User Layout.
Two layouts has different routes and different view.
Specifically when I am rendering User layout, I am getting these issues.
In admin layout Its working fine.

Here is my index.js

root.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>
);

Here is my App Js

const [roleGroup] = useState('user');

return (
   <div>
      { roleGroup === 'user' && <UserLayout /> }
      { roleGroup === 'admin' && <AdminLayout /> }
   </div>
);

here is my UserLayout

<>
  <Navbar />
  <Suspense fallback={<></>}>
     <Routes>
       {
        commonRoutes.map((route, index) =>
         <Route
          key={index}
          exact={route.exact}
          path={route.path}
          element={route.element}
         />
        )}
    </Routes>
 </Suspense>
</>

I guess In Admin layout there is no problem cause when i change role to user this issue happens.
what is the issues in my code?

I explained everything in problem section. Firstly I keep router in my Index.js.