The best way to securing react JS Route based on roles

So I already implemented private routing in react JS with the help library from react-aad-msal. When the user does not authorize It will show a landing page to ask the user to log in. The next step is we want to limit what the user can and cannot see. We Have Table Users that contain the Email and what Role the user belongs to, we also have another table securityrolesdetail this table will return all the route the User Roles has. So we create an API this API will return All the Routes the User has in the React App, and the returned data from API will filter the main ListRouter Array in the React App. I already implemented all that but I just want to be certain that this is the best practice and doesn’t have a flaw.
My Code is looking like this.

export const ListRouter = [
{
    id: "1",
    title: "Menu1",
    linkto: "/Menu1",
    paths: '/Menu1',
    elements: <Menu1/>
},
{
    id: "2",
    title: "Menu2",
    linkto: "/Menu2",
    paths: '/Menu2',
    elements: <Menu2/>
}, 
{
    id: "3",
    title: "Menu3",
    linkto: "/Menu3",
    paths: '/Menu3',
    elements: <Menu3/>
}
]

And then in the App.Js we called an API to return all the available router.

API Rerturn
["/menu1", "/menu2"]

After we got the data from the API then we filter the ListRouter based on the returned data in useeffect

 const routerResult = await getFormListRouter().then(x => {
                var userModule = x.data;
                var module = ListRouter.filter((x) => {
                    if (userModule.indexOf(x.linkto.toString().toLowerCase()) > -1) {
                        return x;
                    }
                });
                setRouters(module);
            });

After that we use the state in the component to render all the Router so when user don’t have the permission to the page it will return no router match

                    <Routes>
                        {routers.map((listmap) => (
                            <Route
                                path={listmap.paths}
                                element={listmap.elements}
                                key={listmap.id}
                            />
                        ))}
                    </Routes>

For now this Already work, the user can’t open the menu3 in the browser. From this Implementation is there anything should I concern, or I can add to make it more secure.