watchOverflow not working with React's forwardRef

[pypp]

I've created custom navigation buttons and everyting seems to work fine except for the watchOverflow, when using ref directly from the component instead of using forward ref the watchOverflow seems to work fine.
The two examples are the same except that in the first I use forwardRef and in the second I use the ref directly insde the component.
The navigation works in both cases only the watchOverflow doesn't.

using forward ref (doesn't work):

import { Swiper as SwiperComponent } from "swiper/react";

const Slider = ({ children }: SliderProps): ReactElement => {
  const prevRef = useRef<HTMLDivElement>(null);
  const nextRef = useRef<HTMLDivElement>(null);

  return (
    <div className={styles.container}>
      <SwiperComponent
        modules={[Navigation]}
        allowTouchMove={false}
        className={styles.slider}
        resistance={false}
        rewind
        navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
        onBeforeInit={({ params: { navigation } }) => {
          if (typeof navigation !== "object") return;

          navigation.nextEl = nextRef.current;
          navigation.prevEl = prevRef.current;
        }}
      >
        {children}
      </SwiperComponent>

      {/* using forwardRef */}
      <PrevButton ref={prevRef} />
      <NextButton ref={nextRef} />
    </div>
  );
};

PrevButton.tsx:

const PrevButton = forwardRef<HTMLDivElement, unknown>(function PrevButton(_, ref) {
  return (
    <div ref={ref} className={styles.prev}>prev</div>
  );
});

Using ref directly (works):

import { Swiper as SwiperComponent } from "swiper/react";

const Slider = ({ children }: SliderProps): ReactElement => {
  const prevRef = useRef<HTMLDivElement>(null);
  const nextRef = useRef<HTMLDivElement>(null);

  return (
    <div className={styles.container}>
      <SwiperComponent
        modules={[Navigation]}
        allowTouchMove={false}
        className={styles.slider}
        resistance={false}
        rewind
        navigation={{ prevEl: prevRef.current, nextEl: nextRef.current }}
        onBeforeInit={({ params: { navigation } }) => {
          if (typeof navigation !== "object") return;

          navigation.nextEl = nextRef.current;
          navigation.prevEl = prevRef.current;
        }}
      >
        {children}
      </SwiperComponent>

      {/* using ref directly */}
      <div ref={prevRef}>prev</div>
      <div ref={nextRef}>next</div>
    </div>
  );
};

[pypp]

The problem wasn't the forwardRef it was that custom style that I passed the div.