What is the best strategy for managing permissions and role-based access control (RBAC) in a large React application?

I am working on a large React application that supports multiple user roles such as Admin, Manager, Editor, and Viewer. Each role has access to different pages, components, actions, and API operations.

Currently, permission checks are scattered throughout the application using conditional rendering and route guards. As the application grows, maintaining these checks has become difficult and error-prone.

I am looking for a scalable and maintainable approach to implement Role-Based Access Control (RBAC) in React. Specifically:

• How should permissions be structured and stored?

• Is it better to use Context API, custom hooks, Redux, or another approach?

• How can permissions be managed efficiently for routes, UI components, and API requests?

• Are there any recommended design patterns for enterprise-scale React applications?

I would appreciate examples or best practices from production applications.