Reacht 3 different cards next to each other - reactjs

Question

I am new in React and have a problem with my cards here. I want to show 3 cards next to each other but I get 3 same cards. In bootstrap react I Found this loop to show cards next to each other but because I am looping my cars in const cards I get now 3 same cards next to each other.
I have tried using React bootstrap cards but none of them worked.
If anyone knows how I can fix my issue it would be a great help!
Here is my code:
const cards = hasLoaded ? (
<>
{cars.results.length ? (
<InfiniteScroll
children={cars.results.map((car) => (
<Car2 key={car.id} {...car} setCars={setCars} />
))}
dataLength={cars.results.length}
loader={<Asset spinner />}
hasMore={!!cars.next}
next={() => fetchMoreData(cars, setCars)}
/>
) : (
<Container className={appStyles.Content}>
<Asset src={NoResults} message={message} />
</Container>
)}
</>
) : (
<Container className={appStyles.Content}>
<Asset spinner />
</Container>
);
return (
<Container>
<Row className="h-100">
<Col className="py-2 p-0 p-lg-2" lg={8}>
<PopularProfiles mobile />
<i className={`fas fa-search ${styles.SearchIcon}`} />
<Form
className={styles.SearchBar}
onSubmit={(event) => event.preventDefault()}
>
<Form.Control
value={query}
onChange={(event) => setQuery(event.target.value)}
type="text"
className="mr-sm-2"
placeholder="Search posts"
/>
</Form>
</Col>
</Row>
<Row>
{Array.from({ length: 3 }).map((_, idx) => (
<Col md={3}>{cards}</Col>
))}
<Col md={3} className="d-none d-lg-block p-0 p-lg-2">
<PopularProfiles />
</Col>
</Row>
</Container>
);