Chat/src/components/MemberList/MemberList.jsx

import { Avatar } from "@mui/material"
import { backendURL } from "../../helpers/gql"
import { MemberItem, MemberListWrapper, MemberName } from "./MemberList.style"

export const MemberList = ({members}) => {
    return (
        <MemberListWrapper>
            {members?.map((member) => <MemberItem key={member?._id}>
                <Avatar
                    src={`${backendURL}/${member?.avatar?.url || ''}`}  
                    sx={{width: 45, height: 45, mr: '20px'}}
                    alt="member"
                />
                <MemberName>{member?.nick}</MemberName>
            </MemberItem>)}
        </MemberListWrapper>
    )
}