How to prevent a carousel from slipping when it reaches the last item?

Question

I’m making a carousel from scratch, it contains 7 items, the problem is when it gets to the last item I can still click to the next one, I want every time I get to the last item the carousel stop.

I’m using Transform to make the effect of passing items, so every time I press the next button, translateX increases, I don’t know if this is the best approach.

 transform: ${({ currentSlide }) =>
        currentSlide ? `translateX(-${currentSlide}00%)` : "translate(0%)"};

I don’t want all this space when I get to the last item

This should be the expected result

Code: https://codesandbox.io/s/dogs-carousel-u7126?file=/src/App.tsx