ProfileInfo component.
This component is responsible for displaying the user's profile information and allowing the user to change their role.
It uses the useState and useEffect hooks from React to manage state and side effects.
The user's information is passed in as a prop.
The component fetches the roles from the API when it is mounted and stores them in a state variable.
The user can open a modal to change their role, and the component will call the API to make the change.
ProfileInfo component. This component is responsible for displaying the user's profile information and allowing the user to change their role. It uses the useState and useEffect hooks from React to manage state and side effects. The user's information is passed in as a prop. The component fetches the roles from the API when it is mounted and stores them in a state variable. The user can open a modal to change their role, and the component will call the API to make the change.