React js role based routing - Restrict unauthorized access

I have a react js application with 2 routing sections /admin and /user.

Admin's default route is /admin/dashboard and user's default route is /user/dashboard.

I have the following routes for admin and I am using renderRoutes from react-router-config

{
path: '/admin',
component: AdminContainer,
routes: [
  {
    path: '/admin/login',
    component: AdminLogin,
  },
  {
    path: '/admin/dashboard',
    component: AdminDashboard
  },
  {
    path: '/admin/profile/create',
    component: CreateProfile
  },
  {
    path: '/admin/profile/approve',
    component: ProfileApprove
  },
  {
    path: '/admin/media/approve',
    component: MediaApprove
  },
  notFoundRoute
]

},

I want to restrict non-admin users to access /admin routes and to show unauthorized page. How can I do this?