I am trying to learn swiper.js in react by building a simple image slider with autoplay and I don't know how to
stop autoplay onMouseEnter and start it onMouseLeave.
I tried onMouseLeave={Swiper.autoplay.stop} and it didn't work.

```
import React from 'react';
import classes from './HeroSlider.module.css';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
import 'swiper/swiper-bundle.css'; // swiper.min.css
import image1 from '../../Images/image1.png';
import image2 from '../../Images/image2.png';
import image3 from '../../../Images/image3.png';

SwiperCore.use([ Navigation, Pagination, Autoplay ]);

const HeroSlider = () => {
  return (
    <Swiper 
      className={ classes.MainSlider }
      autoplay={{ delay: 5000, disableOnInteraction: false, reverseDirection: true, waitForTransition: true }}
      pagination={{ clickable: true }}
      navigation
      onMouseEnter={}
      onMouseLeave={}
    >
      <SwiperSlide className="full-w-h-container" tag="li" style={{ listStyle: "none" }}>
        <img className={ `full-w-h-container ${ classes.ImgBg }` } src={image1} alt="image1" />
      </SwiperSlide>
      <SwiperSlide className="full-w-h-container" tag="li" style={{ listStyle: "none" }}>
        <img className={ `full-w-h-container ${ classes.ImgBg }` } src={image2} alt="image2" />
      </SwiperSlide>
      <SwiperSlide className="full-w-h-container" tag="li" style={{ listStyle: "none" }}>
        <img className={ `full-w-h-container ${ classes.ImgBg }` } src={image3} alt="image3" />
      </SwiperSlide>
    </Swiper>
  )
}
export default HeroSlider;

```

Edit:

I tried something like
onMouseEnter={() => Swiper.autoplay.stop()}
onMouseLeave={() => Swiper.autoplay.start()}
but It doesn't work strangely though if I use something like:
onClick={() => Swiper.autoplay.stop()}
It works...