react-responsive-carousel - screen turned white when sweep

Question

On smaller screen, if i swipe to left or right, at beginning, slider went fare more on left or right then content it have, displaying white (background) space. i was investigating this issue and it is probably connected with issue https://github.com/leandrowd/react-responsive-carousel/issues/513 . Probably the carousel go too fast to a lot of items ahead of the current and will go to the end of the carousel, which is when it turns white My jsx is

import styles from "./favouriteLocations.module.scss";
import FavouriteLocation from "./favouriteLocation";
import Underline from "../../components/underline/underline";
import useTranslation from "next-translate/useTranslation";
import { useMediaQuery } from "react-responsive";
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import { generateFinalMediaUrl,generateEntityUrl } from "../../common/utils";

export default function FavouriteLocations({ favouriteSection,draftMode }) {
  const { t, lang } = useTranslation("common");
  const isTablet = useMediaQuery({ query: "(max-width: 992px)" });
  const isMobile = useMediaQuery({ query: "(max-width: 600px)" });

  const favouriteLocationsToRender = () => {
    return favouriteSection.map((favourite) => {
      const { bannerId,entityId,entityType,type, name, categoryStampId, categories, interestStampId, interests, description } = favourite;

      const entityTypeFinal = entityType === 0 ? 'Location' : entityType; 
      const entityUrl = generateEntityUrl(entityTypeFinal,entityId,draftMode);
      let imageUrl = null;

      if (entityTypeFinal && entityId && bannerId)
        imageUrl = generateFinalMediaUrl(
          entityTypeFinal,
          entityId,
          bannerId,
          true,
        );

      return (
        <FavouriteLocation
          key={entityId}
          type={
            !!categoryStampId ? categoryStampId : interestStampId ?? "Church"}
          isInterest={!!!categoryStampId}
          title={name}
          category={
            !!categoryStampId
              ? categories[0].name
              : interests[0].name || t("noCategory")}
          desc={description || t("noDescription")}
          entityUrl={entityUrl}
          imageUrl={imageUrl}
        />
      );
    });
  };

  return (
    <>
      <div className={styles.favouriteLocationsContainer}>
        <div className={styles.headingContainer}>
          <div className={styles.favouriteHeading}>{t("favourite")}</div>
          <Underline />
        </div>

        {!isTablet && !isMobile && (
          <div className={styles.favouriteLocationsList}>
             {favouriteLocationsToRender()}
          </div>
        )}
//THIS PART IS A PROBLEM
        {isTablet && !isMobile && (
          <Carousel
            showStatus={false}
            showThumbs={false}
            centerMode={true}
            showIndicators={false}
            showArrows={false}
            centerSlidePercentage={45}
          >
           {favouriteLocationsToRender()}
          </Carousel>
        )}
      </div>
    </>
  );
}

And my css is

@import './../../styles/screens.scss';

.favouriteLocationsContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

.favouriteLocContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    // margin-bottom: 1.750em;
    width: 24.5%;
  }

  .favouriteLocationsList {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color:#ffffff;
    width: 100%;
    border-radius: 15px 15px 15px 15px;
  }

  .headingContainer {
    // margin-left: 0.5em;
  }

  .favouriteHeading {
    font-weight: 300;
    font-size: 2.25em;
  }

  /* media queries */

  @media screen and (max-width:$large-device-min-width) {
    // .favouriteLocationsContainer {
    //   margin: 0 5em;
    // }

    .favouriteLocContainer {
      width: 100%;
      margin-bottom: 0px;
      margin-top: 1em;
      padding: 0 0.5em;
    }

    .favouriteLocationsList {
      flex-wrap: wrap;
      margin-bottom: 1em;
    }

    .favouriteHeading {
      font-weight: 300;
      font-size: 1.875em;
    }
}

My question is how to prevent write space to appear. Is it any possible solution to control speed of slide change per sweep (eg to change just one slide, or to change certain amount of pixels per sweep)? Did I made mistake in css styling? I am using version "react-responsive-carousel": "^3.2.21",

I am tying to achieve to sweep just one slide per sweep (slide is set to 45 of page width) or to control amount of pixel slider will go per sweep, and to prevent blank space