how to make infite scroll not to jump react

I’m working on implementing an infinite scrolling feature for a list of images, but I’m encountering an issue where the scrolling behavior is not smooth—it keeps jumping unexpectedly. This disrupts the user experience, and I’m not sure what’s causing it. Below is the code I’m using. I’d appreciate any insights on what might be wrong and how to fix it?

const partnersImg = [
  <img src={lisk} alt=""  className={`prt-img`} />,
  <img src={tradlander} alt=""  className={`prt-img`} />,
  <img src={flick} alt=""  className={`prt-img`} />,
  <img src={afirk} alt=""  className={`prt-img`} />,
  <img src={stb} alt=""  className={`prt-img2`} />,
  <img src={cv} alt=""  className={`prt-img3`} />,
];

const InfiniteScroll = () => {    
  return (
    <div className="partners-container">
      {/* <div className="partners mt-[40px] w-[100%] flex justify-center items-center gap-[40px]"> */}
      <div className="partners mt-[40px] w-[100%] flex  items-center gap-[40px]" >

        {[...partnersImg, ...partnersImg, ...partnersImg, ...partnersImg].map((item, index) => (
          item
        ))}
      </div>
    </div>
  );
};

.partners-container {
  width: 100%; 
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
  justify-content: center;
}

.partners {
  display: flex;
  gap: 40px;
  animation: scroll-left 10s linear infinite; 
  will-change: transform;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.prt-img{
  width: 100px;
}
.prt-img2{
  width: 200px;
}
.prt-img3{
  width: 50px;
}

It keeps jumping, how do I solve this?