pauseOnMouseEnter pauses slider after some delay

[DonKoko]

Hello everyone,

I am facing a bit of an issue with pauseOnMouseEnter.

Some info about my env:

• MacOS
• Swiper version: "swiper": "^7.4.1",
• I am using the React Swiper

So I have a slider that auto-slides some logos, typical marquee style.
What I want to do is, pause the slider when its hovered and resume when mouse leaves the slider. Pretty standard functionality.

Problem

Whenever I hover the slider, it doesn't pause immediately. It takes has some delay(seems random time for me) and then it pauses. My only assumption is that it waits for the next slide to be fully visible before it pauses, but as you can imagine that defeats the purpose for me.
Here is a small screen recording of it:

Screen.Recording.2022-01-26.at.16.43.47.mov

Component

import { Package } from "frontity/types";
import { connect, styled, useConnect } from "frontity";
import Image from "@frontity/components/image";
import { useEffect, useRef, useState } from "react";
import { DataEntity } from "@frontity/source/types";
import Link from "../../link";
import { HasBreakpoints } from "../../../styles/types";
import { Swiper, SwiperProps, SwiperSlide } from "swiper/react/swiper-react.js";
import { Autoplay } from "swiper";
import { useSideMargin } from "../../../hooks";

interface PartnerLogosMarqueeProps {
  collections: string;
}

const PartnerLogosMarquee = ({ collections }: PartnerLogosMarqueeProps) => {
  const { actions, state, libraries } = useConnect<Package>();
  const [logos, setLogos] = useState<DataEntity[]>([]);

  const { breakpoints } = libraries.theme;
  const sideMargin: number = useSideMargin();

  const sliderConfig: SwiperProps = {
    modules: [Autoplay],
    loop: true,
    slidesPerView: "auto",
    autoplay: {
      delay: 1,
      pauseOnMouseEnter: true,
      disableOnInteraction: false,
    },
    speed: 5000,
  };

  useEffect(() => {
    actions.theme.fetchPartnerLogos(collections, setLogos);
  }, []);

  return logos.length > 0 ? (
    <div>
      <StyledSlider {...sliderConfig} breakpoints={breakpoints} sm={sideMargin}>
        <div className="swiper-wrapper">
          {logos.map(({ type, id }) => {
            const partner = state.source[type][id];
            const { link, logo } = partner.acf;
            return (
              <SwiperSlide key={id}>
                <Link link={link.url} target={link.target} role="wrapper">
                  <Logo
                    alt={`${partner.title.rendered} logo`}
                    src={logo.url}
                    w={logo.width}
                    breakpoints={breakpoints}
                  />
                </Link>
              </SwiperSlide>
            );
          })}
        </div>
      </StyledSlider>
    </div>
  ) : null;
};

export default connect(PartnerLogosMarquee);

const StyledSlider = styled(Swiper)<HasBreakpoints & { sm: number }>`
  margin-right: -${(props) => props.sm}px;

  .swiper-slide {
    width: auto;
    margin-right: 64px;
  }

  .swiper-wrapper {
    align-items: center;
    -webkit-transition-timing-function: linear !important;
    -o-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
  }

  .wp-block-columns {
    margin-bottom: 0;
  }
  ${(props) => props.breakpoints["small only"]} {
    margin-top: 40px;
  }

  /* Before & After are used to create the fading effect at the edges */
  &:before,
  &:after {
    display: block;
    content: "";
    position: absolute;
    background-color: red;
    height: 100%;
    width: 10%;
    top: 0;
    z-index: 2;
  }
  &:before {
    left: 0;
    background: linear-gradient(
      to left,
      rgba(36, 96, 139, 0) 0%,
      var(--secondary) 100%
    );
  }
  &:after {
    right: 0;
    background: linear-gradient(
      90deg,
      rgba(36, 96, 139, 0) 0%,
      var(--secondary) 100%
    );
  }
`;

const Logo = styled(Image)<HasBreakpoints & { w: number }>`
  ${(props) => props.breakpoints["small only"]} {
    width: ${(props) => props.w / 2}px;
  }

  ${(props) => props.breakpoints["medium"]} {
    transition: transform 0.2s cubic-bezier(0.075, 0.82, 0.165, 1),
      opacity 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 0.9;
    &:hover {
      transform: scale(1.05);
      opacity: 1;
    }
  }
`;

Any ideas what the cause of the issue is? Is someone aware of a workaround?