focusOnSelect isn't animating to the correct slide

Sandbox to replicate the issue:
https://codesandbox.io/s/react-slick-playground-it0fw

**Steps To Reproduce:**
We have a carousel showing 3 slides with centerMode enabled. The first slide when you load the codesandbox is an image of a rabbit, if you select the slide on the left (an image of a dog, which is the last slide from the DOM), it slides to it as expected. From there, if you want to select the 2nd slide on the right (the image of the bear), instead of moving to the bear, it animates to the first slide (the rabbit).

**Expected Behaviour**
To slide from the last slide (with an image of a dog) to the second slide (image of a bear), passing over the first slide (image of a rabbit)

**Observed Behaviour**
Slides to the first slide and never goes to the second slide, unless it is selected again.

Additional Details:
I tried investing it myself and I've got down to line 199 in innerSliderUtils, but not really sure how to fix it from there.
https://github.com/akiran/react-slick/blob/master/src/utils/innerSliderUtils.js#L199

It is not a slick issue, I have made a codepen for it:
https://codepen.io/iwicha/pen/MWKPJbZ