Estoy usando la función de mapa en esto

 <div className="about-sports"> <AboutHead head="Sports" /> <div className="sport-cards"> <Slider {...settings}> {response.sport.map((sport, key) => { return ( <div className="sport-card" key={key}> <Card sx={{ maxWidth: 100 }}> <CardMedia component="img" alt={sport.name} height="100" image={sport.sportImgURL} className="about-img" /> <CardContent className="logo-name">{sport.name}</CardContent> </Card> </div> ); })} </Slider> </div> <Line width="100%" marginTop="15px" marginLeft="0px" /> </div>

la respuesta es el estado que contiene

 sport: Array [ {…}, {…} ] 0: Object { id: "1526fad5-d14a-4636-b259-1c3f366bce9c", sports_id: "52304670-9efd-4b95-9799-c782ea8907c4", name: "Cricket", … } 1: Object { id: "5cdbc516-a78b-469b-9036-58cea1478d5d", sports_id: "08c56898-3a4e-4b07-86bc-101a0542253f", name: "Chess", … } length: 2

dado que la longitud es 2 pero el componente muestra 4 cartas