Styled List Item - Copy this React, Mui Component to your project

Create a Chat Room List component that displays a list of available chat rooms. Each chat room should be clickable and open its corresponding chat interface. Basic Requirements: The component should retrieve a list of chat rooms from an API. Each chat room should display the room name and the last message. When a user clicks on a chat room, it should open the corresponding chat interface. Design Specifications: Utilize Material UI's List, ListItem, Typography, and Divider components for a clean presentation. Each chat room item should include: A title (chat room name). A subtitle (last message or participant list). An indicator for unread messages, if applicable (e.g., a badge). Provide hover effects on the chat room items for better user interaction. Functionality: Use state management (e.g., React hooks) to manage the list of chat rooms and the currently selected chat room. Implement a click handler that updates the selected chat room and triggers the display of the chat interface for that room. Handle loading and error states when fetching chat rooms from the API. State Management: Use useState for managing the list of chat rooms and the currently selected room. Optionally, use useEffect to fetch the chat room data from your API when the component mounts. API Interaction: Assume the API returns data in the following structure: json Copy [ { "id": "1", "name": "General", "lastMessage": "Hello everyone!", "unreadMessages": 5 }, { "id": "2", "name": "Project Discussion", "lastMessage": "Let's finalize the project plan", "unreadMessages": 2 } ] Accessibility and Responsiveness: Ensure that the component is accessible, with appropriate ARIA roles and properties. Make the component responsive and adapt to different screen sizes. Styling: Use Material UI's theming for consistent styling. Ensure that there is enough padding and margins for good aesthetics.