typescriptでmaterial-uiを使ってアバターを複数人表示したい

Question

前提・実現したいこと

typescriptでmaterial-uiを使って複数人のアバターを表示したい。

Propsでemployeeだけが配列になっていて、
その中に入っている全てのnameの頭文字をとってアバターとしてを表示したいです。

イメージはこんな感じです

該当のソースコード

pcard.tsx

import React, { useState } from 'react';
import { Project, Client, Employee } from '@/Domain/Entity';
import {
    Avatar,
    Card,
    CardHeader,
    CardActions,
    CardContent,
    Button,
    Dialog,
    DialogTitle,
    DialogContent,
    DialogContentText,
    DialogActions,
    Hidden,
    IconButton,
} from '@material-ui/core';
import { AvatarGroup } from '@material-ui/lab';

interface Props {
    project: Project;
    client: Client;
    employees: Employee[];
    onArchive: (project: Project) => void;
}
export function ProjectCard(props: Props) {
    const { project, client, employees, onArchive } = props;

        return (

<Card >
<CardHeader
                avatar={
                    <Avatar>
                        {client
                            ? client.orName.slice(0, 1).toUpperCase()
                            : ''}
                    </Avatar>
                }
                title={project.name}
               
            />
                <CardContent>
                    <AvatarGroup max={3}>
                        <Avatar>
                            {employees ? employees[0].name.slice(0, 1)
                                .toUpperCase() : ''}
                        </Avatar>
                    </AvatarGroup>
                </CardContent>
</Card>
);
   
}

employee.ts

export interface EmployeeProps extends Timestamps {
    id: number;
    familyName: string;
    givenName: string;
    
}

export class Employee implements EmployeeProps {
    constructor(
        public familyName: string,
        public givenName: string,
    ) {}

    get name() {
        return `${this.familyName} ${this.givenName}`;
    }
}

試したこと

const aaa = employees.map(e => {
        return (
            <Card key={project.id} className={classes.card}>
<CardHeader
                    avatar={
                        <Avatar>
                            {client
                                ? client.organizationName
                                      .slice(0, 1)
                                      .toUpperCase()
                                : ''}
                        </Avatar>
                    }
                    
                />
                <CardContent>
                    <AvatarGroup　m={3}>
                        <Avatar>
                            {e ? e.name.slice(0, 1).toUpperCase() : ''}
                        </Avatar>
                    </AvatarGroup>
                </CardContent>
</Card>
        );
    });
    return aaa;

このようにやると、
JSX element type 'Element[]' is not a constructor function for JSX elements.
Type 'Element[]' is missing the following properties from type 'Element': type, props, key
となり、pcardを使っている場所ではinterfaceのpropsの要素を必要としているためエラーが起きます。

自分ではこれ以上やり方が思いつかないので、分かる方がいましたら教えていただきたいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

{employees.map(e=>{
return(
<Avatar key=e.id>
                   {e ? e.name.slice(0, 1)
                                .toUpperCase() : ''}
                        </Avatar>
);
})}

このようにすると取り出せました