Styled Table Container - Copy this React, Mui Component to your project

Create a user list table that fetches data from the API endpoint /api/AppUser/List. The table should display detailed information about each user, organized into six columns with specific data and actions. The columns are as follows: Index: A unique number for each user, representing their position in the list (starting from 1). This helps users easily reference each entry. Email: Displays the email address of each user. This is the primary identifier for each user account and allows easy contact or reference. Social Account Limit: Shows the number of social accounts each user has linked or is permitted to link. This column helps understand the user's current level of access or usage. Full Name: Displays the full name of each user. This makes it easier to identify users by their real names rather than just their email addresses. Is Banned: This column shows whether the user is currently banned from using the application. It could be represented as a boolean value (Yes/No) or with a visual indicator like a checkmark or a red cross. Actions: The final column should provide a dropdown menu for interacting with the user account. The dropdown will contain two possible actions based on the user's status: Ban/Unban: This option changes dynamically depending on the user's current ban status. If the user is not banned, the dropdown should show "Ban," which when clicked, calls the API endpoint /api/AppUser/Ban to ban the user. Conversely, if the user is already banned, the option should show "Unban," calling the API /api/AppUser/UnBan to lift the ban. Update User: This option should open a modal dialog to allow updating user details. When clicked, the modal will be populated by calling the /api/AppUser/Detail API to retrieve the detailed information of that specific user. This data should then be parsed and displayed in the respective fields of the modal, allowing an admin to edit and save updates. Ensure to use conditional rendering for the dropdown actions to adapt based on the user status (banned or not). When rendering this list, use object mapping to iterate over the array of user data, efficiently generating rows for each user. The modal for user updates should be pre filled with current user details for easy modifications. The overall design should focus on clarity, usability, and ensuring the admin can perform actions swiftly without confusion or excessive navigation.