Map render a unique slide in the carousel

[mbayou]

Is there an existing issue for this?

• [X] I have searched the existing issues

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Code Sandbox link

No response

Bug report

Hi, 

I am struggling building up my carousel. It looks like when using a map to create React Component in the carousel they just appear in on slide. 

I am sure I am doing something wrong so really any guidance would be very welcome. 

export const AnnounceCard = ({language, token}: AnnounceCardProps) => {
  ...
  return <Card>
    <CardContent>
      <Carousel showArrows showDots>
        {announces.map((announce, index) => (<div key={index}>
          <Typography>ANOTHER {announce.title}</Typography>
          <Typography>ANOTHER {announce.details}</Typography>
        </div>))}
      </Carousel>
    </CardContent>
  </Card>
}