Black background appering on image slider

Basically I'm using this https://github.com/hmongouachon/rgbKineticSlider trying to make an image slider but the problem is that my images are more white. When I press next or prev buttons a black image appears which is noticeble. That's the source code I forked but my images are 450 x 450 not full screen

https://codepen.io/hmongouachon/pen/QWbLpzW

 <section class="hero">
    <div class="hero__box">
      <h1 class="hero__h1">Quize Yourself</h1>
      <p>Download the number one free dictionary app with English language learning tools.</p>
      <div class="hero__btns">
        <img src="./left.png" alt="" class="main-nav prev" data-nav="previous">
        <img src="./right.png" alt="" class="main-nav next" data-nav="next">
      </div>
    </div>
    <div id="rgbKineticSlider" class="rgbKineticSlider"></div>   
  </section>

.hero {
  padding: 0 250px;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero__box {
  width: 300px;
}
h1 {
  font-size: 60px;
}
p {
  font-size: 20px;
}
.rgbKineticSlider {
  display: block;
  position: relative;
  overflow: hidden;
  width: 450px !important;
  height: 450px !important;
  border-radius: 50px;
}
.rgbKineticSlider canvas {
  width: 450px !important;
  height: 450px !important;
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) scale(2.4) !important;
  background-color: #fff !important;
  /* top: calc(50vh - 225px) !important;
  left: calc(50vw - 225px) !important; */
  /* transform: scale(1) !important; */
}
nav a {
  color: black;
  text-decoration: none;
  position: absolute;
  top: 150vh;
  z-index: 1;
  background-color: white;
  padding: 20px;
}
nav a.next {
  right: 20px;
}
nav a.prev {
  left: 20px;
}

rgbKineticSlider = new rgbKineticSlider({
  // images and content sources
  slideImages: images, // array of images >demo size : 1920 x 1080
  itemsTitles: texts, // array of titles / subtitles
// https://res.cloudinary.com/therealsk/image/upload/v1593860931/heightMap_jjb5ng.png
// https://i.ibb.co/N246LxD/map-9.jpg
  // displacement images sources
  backgroundDisplacementSprite: "https://res.cloudinary.com/therealsk/image/upload/v1593860931/heightMap_jjb5ng.png", // slide displacement image
  cursorDisplacementSprite: "https://i.ibb.co/KrVr51f/displace-circle.png", // cursor displacement image

  // cursor displacement effect
  cursorImgEffect: true, // enable cursor effect
  cursorTextEffect: false, // enable cursor text effect
  cursorScaleIntensity: 0.25, // cursor effect intensity
  cursorMomentum: 0.15, // lower is slower

  // swipe
  swipe: false, // enable swipe
  swipeDistance: window.innerWidth * 0.4, // swipe distance - ex : 580
  swipeScaleIntensity: .1, // scale intensity during swipping

  // slide transition
  slideTransitionDuration: .5, // transition duration
  transitionScaleIntensity: 60, // scale intensity during transition
  transitionScaleAmplitude: 160, // scale amplitude during transition

  // regular navigation
  nav: true, // enable navigation
  navElement: ".main-nav", // set nav class

  // image rgb effect
  imagesRgbEffect: true, // enable img rgb effect
  imagesRgbIntensity: 0.9, // set img rgb intensity
  navImagesRgbIntensity: 20, // set img rgb intensity for regular nav
});

I think there is canvas problem that appears on it's div container.