Prev and Next button is not working correctly at the breakpoints

Looks like everything is working already but the disabled Next button. I think it should work already by changing the disabled condition to check the amount of slides the slider is at.

Changing the renderArrow body to this in the provided code sandbox seems like it works:

  const lastElementsIndex = totalSlides - slidesToScroll;
  return (
    <div>
      <button disabled={currentIndex === 0} onClick={prevCallback}>
        Previous
      </button>
      <button disabled={currentIndex > lastElementsIndex} onClick={nextCallback}>
        Next
      </button>
    </div>
  );

Since the initial state is not synchronized with the actual values depending on the breakpoint, there might be a special case as pointed out in the comments. Using onReInit as a non-arrow function should get access to the this object of the Slick slider itself. From there, the correct slidesToScroll can be retrieved:

const settings = {
  // ... other settings ...
  onReInit: function() {
    const slidesToScroll = this.slidesToScroll;
    if (slidesToScroll !== state.slidesToScroll) {
      setState(state => ({ ...state, slidesToScroll }));
    }
  },
  // ... other settings ...
};

In a previous edit, I've proposed using onInit - using onReInit has the benefit of shooting on window resize as well. Thus it should also synchronize the state correctly when resizing.