Creating a centered carousel with react-alice-carousel

Question

I have struggled the whole day to create a centered carousel with react-alice-carousel library and the results are those. Link to the library here

Basically I achieve the results showcased on the gif which were fulfilling enough for me but the fact that the focused image (the one on the left) is not centered is bugging me a lot. I have tried overwriting certain CSS properties but the results were not great (carousel item disappears if I try absolute positioning). My question is - is there a certain algorithm I can add to my logic so that the centered image would be in the middle of the carousel always? (2nd item in array of 3, 3rd item in array of 5, 4th item in an array of 7 and etc.) and if such algorithm does not exist how can I achieve to make my carousel centered-oriented.

Sandbox: https://codesandbox.io/s/happy-lichterman-knwbce?file=/src/App.js
Targeted tile (plays the role of the product in my gif) is marketed in red color

Also mostly my carousel in the project:

 // Carousel helper properties / functions
  const responsive = {
    2000: {
      items: 11,
    },
    1200: {
      items: 5,
    },
    800: {
      items: 3,
    },
    0: {
      items: 1,
    },
  };
  const handleDragStart = (e: any) => e.preventDefault();
  const items = products.map((product, index) => (
    <img
      key={product._id}
      className={selectedIndex === index ? "focusedImage" : "shownImage"}
      onDragStart={handleDragStart}
      style={{ height: "150px", width: "150px" }}
      src={product.image}
      alt='Product that is being sold on this page'
    />
  ));
  return (
    <main>
      <div className='details__wrapper'>
        <AliceCarousel
          activeIndex={selectedIndex}
          mouseTracking
          responsive={responsive}
          items={items}
          infinite
          controlsStrategy={"default"}
          autoPlayStrategy='all'
          autoPlayInterval={1000}
          disableDotsControls
          disableButtonsControls
          keyboardNavigation
          onSlideChanged={(e: EventObject) => {
            setSelectedIndex(e.item);
            setSelectedProduct(products[e.item]);
          }}
        />

As seen all of the images that are seen by the user already have classes "shown" or "focused" image

And my SASS:

.alice-carousel {
  &__wrapper {
    & .alice-carousel__stage {
      &-item {
        z-index: 0 !important;
        & .shownImage {
          opacity: 0.5;
          margin: 0 auto;
          grid-area: image;
          display: block;
          border: 2px solid;
          border-radius: 50%;
          height: 20rem !important;
          width: 20rem !important;
        }
        &.__target {
          z-index: 1 !important;
          .focusedImage {
            opacity: 1 !important;
          }
        }
      }
    }
  }
}

Mostly classes already listed in the documentation on GitHub.