How to center and align images correctly in react-id-swiper

Now I’m working for my react project. Also I’m a newbie to react-id-swiper. So I needed to make a carousel for my web site.(Like this:- https://codesandbox.io/s/reie4?file=/index.html:0-2857, https://react-id-swiper.ashernguyen.site/example/three-d-coverflow-effect) So I used react-id-swiper npm package for that. But when I implement it I got a slider like this. enter image description here

enter image description here

enter image description here

So my code is,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'swiper/css/swiper.css';
import Swiper from 'react-id-swiper';

const CoverflowEffect = () => {
  const params = {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    },
    pagination: {
      el: '.swiper-pagination',
    },
  };
  return (
    <Swiper {...params}>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
      <div>
        <img src="https://lh3.googleusercontent.com/MOf9Kxxkj7GvyZlTZOnUzuYv0JAweEhlxJX6gslQvbvlhLK5_bSTK6duxY2xfbBsj43H=w300"></img>
      </div>
    </Swiper>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <CoverflowEffect />
  </React.StrictMode>,
  document.getElementById('root')
);
export default CoverflowEffect;

So how can I position this slider in the middle of the web, also how can I reduce the gap between those two images? I tried many things but I failed in it.

"react-id-swiper": "4.0.0",
"swiper": "5.4.5"

Those are my dependencies of react-id-swiper and swiper packages. I downgraded them because there is problem with the swiper package when importing.

Answer

So I downgraded my swiper package to "swiper": "6.6.0" and also removed react-id-swiperpackage. And then I followed the API of the swiperJS and implemented some codeffrom that to my project. And addition to that I added css code also to this. Just this code.

.swiper-container {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  background-color: transparent;
}

So it got solved. So the final conclution is that we have to use earlier npm package of that and also some css code to control the position of slider and also to control the space between slider properly.