Issue in using Rolling Carousel example in another app

[SaadBazaz]

Hey there, I'm back again with bad issues.

I've tried out the "rolling" example in a completely separate app. Worked great.
But here I am trying to put it into another, existing app.

The Problem

The cards are not centered, and upon drag, the whole carousel-track starts moving slightly left or right.

Video of the issue:
https://user-images.githubusercontent.com/51885228/188541506-a9e2ecd0-5a53-4d30-b59e-00051cb58d87.mov

The code:

const  cardSize = 100;
const  cardPadCount = 3;
const  carouselWidth = clamp(window.innerWidth, 0, 960);

.
.
.
.

  function CarouselContainer (props) {
    const { cursor, carouselState, ...rest } = props
    // Put current card at center
    const translateX = (cursor - cardPadCount) * cardSize + (carouselWidth - cardSize) / 2

    return (
      <NonPassiveTouchTarget className='carousel-container'>
        <NonPassiveTouchTarget
          className='carousel-track'
          style={{ 
            transform: `translate3d(${translateX}px, 0, 0)`,
          }}
          {...rest}
        />
      </NonPassiveTouchTarget>
    )
}

The styles:

.top-level-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  overflow-x: hidden;
  width: 100vw;
  margin-top: 0;
  margin-left: 0;
  z-index: 99;
}

.carousel-container {
  height: 300px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  touch-action: pan-y;
}

.carousel-track {
  display: flex;
  height: 100%;
}

.carousel-card {
  flex: 0 0 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  color: white;
  -webkit-tap-highlight-color: transparent;
}

.image-container {
  max-width: 8em;
  max-height: 8em;
  width: 4em;
  height: 4em;
  background-size: cover;  
}

.carousel-card-inner {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100px;
  height: 180px;
  color: rgba(0,0,0,.5);
  transition: inherit;
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); */
  border: 5px solid black;
  border-radius: 1.5em;
}

Any thoughts on what's going wrong?