title: How to use useSwiper outside a Swiper instance?
body: <p>I'm using <a href="https://swiperjs.com/react" rel="noreferrer">Swiper for React</a> to show some slides.</p>
  <p>I'm stuck at using external buttons to navigate between slides (previous and next).</p>
  <p>Swiper has a <code>useSwiper</code> <a href="https://swiperjs.com/react#use-swiper" rel="noreferrer">hook</a> that can provide programmatic access to its Swiper instance API. But it does not work.</p>
  <p>Here's my code:</p>
  <pre><code>import { useSwiper } from 'swiper/react';
  
  //more code
  
  const swiper = useSwiper();
  
  //more code
  
  &lt;Swiper
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      navigation
      spaceBetween={20}
      slidesPerView={1}
  &gt;
      &lt;button onClick={() =&gt; swiper.slideNext()}&gt;Slide&lt;/button&gt;
      {
          ads.map(ad =&gt; &lt;SwiperSlide&gt;
              slider explanation
          &lt;/SwiperSlide&gt;
      )}
  &lt;/Swiper&gt;      
  </code></pre>
  <p>And when I click the button, I receive this error:</p>
  <blockquote>
  <p>TypeError: Cannot read properties of null (reading 'slideNext')</p>
  </blockquote>