How to add spacing between carousel items in react-multi-carousel

Question

I am creating a carousel using react-multi-carousel. I want to be add spacing between each item. Currently, if I add padding to the itemClass, it breaks the functionality of the carousel (the arrow buttons no longer go the appropriate distance).

Code for the carousel:

<Carousel
          responsive={responsive}
          arrows
          className="carousel"
          containerClass="container"
          dotListClass=""
          draggable
          focusOnSelect={false}
          itemClass="project-item"
          keyBoardControl
          minimumTouchDrag={80}
          pauseOnHover
          partialVisible={false}
          rewind={false}
          rewindWithAnimation={false}
          rtl={false}
          showDots={false}
          sliderClass=""
          slidesToSlide={1}
          swipeable
        >
          {projects.map((project) => (
            <div
              key={project.title}
              style={{
                backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%), url(${project.image})`,
                backgroundPosition: "center",
                backgroundSize: "cover",
                backgroundRepeat: "no-repeat",
              }}
              className="project-item-content"
            >
              <div className="project-item-title-container">
                <span className="project-item-title">{project.title}</span>
              </div>
            </div>
          ))}
        </Carousel>

Answer 1

According to this GitHub issue there is no prop to add spacing between the items, the only way for now is to add padding or margin to the item