I am using map function on this

<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>

response is state which contaions

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

as given length is 2 but component showing 4 cards