React Slick: Trigger callback or highlight slide when dragged/swiped slide passes the halfway point

Question

I am using React Slick to create a timeline scroller, with the slides styled as a ruler so the user can visually see the steps moving.

See pic. Red highlighted area is a single 'slide'

As the user scrolls to the left or right, I want the centre line of the slide to trigger a new update (ultimately I want to log the index on the screen and change the colour IN REAL TIME if it's the centred one). At the moment I can only trigger the slides index when releasing the drag (using afterChange and beforeChange)

Using onSwipe seems to not log anything.

Another way of doing this could be to calculate the width of the whole component, and trigger a function that works out when the dragged slide passes over the centre point (but that would require onSwipe to work I think)

  const settings: Settings = {
    dots: false,
    infinite: false,
    speed: 0,
    slidesToShow: 7,
    slidesToScroll: 1,
    swipeToSlide: true,
    draggable: true,
    centerMode: true,
    focusOnSelect: true,
    autoplay: playButtonClicked ? autoplay : false, // Logic to auto play with a button
    autoplaySpeed: 1000,
    afterChange: (index) => handleAfterChange(index), 
  };

I have tried using afterChange, beforeChange etc and onSwipe did not work