How to Assign User Permission via Checkboxlist

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. :)