I have a form on of the slides which opens up on clicking a button in the same slide .But as autoplay is enabled the swiper goes on to the next slide . I want the autoplay to be disabled when user clicks on the form opening button. The form is in index=1.

import Hero1 from "./Hero1/Hero1";
import Hero2 from "./Hero2/Hero2";
import Hero3 from "./Hero3/Hero3";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";

// Styles must use direct files imports
import "swiper/swiper.scss"; // core Swiper
import "swiper/modules/navigation/navigation.scss"; // Navigation module
import "swiper/modules/pagination/pagination.scss";
import "swiper/modules/autoplay/autoplay.scss";
import "swiper/modules/effect-fade/effect-fade.scss";

// Import Swiper styles
import "swiper/swiper-bundle.min.css";

import SwiperCore, { EffectFade, Autoplay, Navigation } from "swiper";

import "./Header.css";
// SwiperCore.use([EffectFade, Navigation, Autoplay, Pagination]);
function Carouselgal() {
  const [play, setplay] = useState(true);
  const [duration, setduration] = useState(3000);

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

  return (
    <>
    
      <Swiper
        autoplay={{ delay: duration, disableOnInteraction: false }}
        navigation={true}
        loop={true}
        className="home__carousel"
        effect="fade"
      >
        <SwiperSlide>
          <Hero1 play={setplay} />
        </SwiperSlide>
        <SwiperSlide data-swiper-autoplay="10000">
          <Hero2 />
        </SwiperSlide>
        <SwiperSlide>
          <Hero3 />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default Carouselgal;```