React slick stop going passed end

I'm using React slick and if I have a bunch of small boxes and I scroll by 3 by setting slidesToScroll it shoots passed the width of my container.

https://codepen.io/e-man/pen/jvJdjY

if you look at the right side when you keep clicking until you reached 10 you will see all the empty space on the right. I want it to stop so the last item is flush up against the right.

Anyway to stop this from over shooting the bounds.

class SliderApp extends React.Component {
  render() {
    const options = {
        infinite: false,
        arrows: true,
        slidesToShow: 6,
      slidesToScroll: 3,
        speed: 300,
    };
    return (
      <div className="container">
        <Slider {...options}>
          <div className='box'>
            <div className="inner-box">1</div>
          </div>
          <div className='box'>
            <div className="inner-box">2</div>
          </div>
          <div className='box'>
            <div className="inner-box">3</div>
          </div>
          <div className='box'>
            <div className="inner-box">4</div>
          </div>
          <div className='box'>
            <div className="inner-box">5</div>
          </div>
          <div className='box'>
            <div className="inner-box">6</div>
          </div>
          <div className='box'>
            <div className="inner-box">7</div>
          </div>
          <div className='box'>
            <div className="inner-box">8</div>
          </div>
          <div className='box'>
            <div className="inner-box">9</div>
          </div>
          <div className='box'>
            <div className="inner-box">10</div>
          </div>
        </Slider>
      </div>
    )
  }
} 

from React slick stop going passed end