Кастомизация react-bootstrap

import Carousel from 'react-bootstrap/Carousel';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../style/ProductCarousel.css';
 
function CarouselComp({ products }) {
  const slides = [];
  
  if (!products || products.length === 0) {
    console.warn('No products available');
    return <div>No products available</div>;
  }
 
  for (let i = 0; i < Math.min(18, products.length); i += 6) {
    const slideProducts = products.slice(i, i + 6);
    
    slides.push(
      <Carousel.Item key={i}>
        <div className="cards-wrapper">
          {slideProducts.map((product, index) => (
            <Card key={index}>
              <div className='image-wrapper'>
                {product.image_name && (
                  <Card.Img variant="top" src={`http://127.0.0.1:8000/static/products_image/${product.image_name}`} alt={product.name}/>
                )}
              </div>
              <Card.Body>
                <Card.Title>{product.name}</Card.Title>
                <Card.Text>
                  {product.price} ₽.
                </Card.Text>
                <Button variant="primary">Go somewhere</Button>
              </Card.Body>
            </Card>
          ))}
        </div>
      </Carousel.Item>
    );
  }
 
  return (
    <Carousel data-bs-theme="dark" interval={null} indicators={false}>
      {slides}
    </Carousel>
  );
}
 
export default CarouselComp;