How to Assign User Permission Via CheckboxList Using MERN

I'm trying to achieve giving user permission using a checkbox list via MERN, I already tried doing a manual user permission by giving fixed permission using an if and else statement. Here is an example:

 {user.role == "SuperAdmin" || user.role == "Admin" ? (
                <>
                  {/* Users */}
                  <PrivateRoute path="/admin/users" component={Users} exact />
                  <PrivateRoute
                    path="/admin/users/create"
                    component={AddUser}
                    exact
                  />
                  <PrivateRoute
                    path="/admin/users/edit/:id"
                    component={EditUser}
                    exact
                  />
              ) : (
                <div id="notfound">
                  <div class="notfound">
                    <div class="notfound-404">
                      <h1>Oops!</h1>
                    </div>
                    <h2>404 - You are not Authorized</h2>
                    <p>
                      The page you are looking for might have been removed had
                      its name changed or you are not authorized to access this
                      page.
                    </p>
                    <a href="#">Go To Homepage</a>
                  </div>
                </div>
              )}

As you can see I used if and else statement in the route, are there any packages tutorial or any sample code you could give me to assign user permission using checkbox list with MERN, thank you all for your help your answers will deeply be appreciated. :)

from How to Assign User Permission Via CheckboxList Using MERN