title: How to initialize Swiper using React hooks?
body: <p>I am using React hooks and Swiper (<a href="https://swiperjs.com/" rel="nofollow noreferrer">SwiperJS Link</a>) library. But, getting an error on initializing it. Can anyone help? 
  I tried like this- </p>
  
  <pre><code>    let mySwiper; 
      useEffect(() =&gt; {
      mySwiper = new Swiper('.swiper-container', {
          loop: true,
          slidesPerView: '2',
          centeredSlides: true,
          pagination: {
              el: '.swiper-pagination',
              clickable: true,
          },
      });
  })
  </code></pre>
  
  <p>But, React is giving me this warning and not initializing the slider correctly. The warning- </p>
  
  <blockquote>
    <p>Assignments to the 'mySwiper' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect.</p>
  </blockquote>
  
  <p>And, at last, my template- </p>
  
  <pre><code>&lt;div className="swiper-container"&gt;
     &lt;div className="swiper-wrapper"&gt;
        {
           places.map((item, index) =&gt; (
            &lt;div key={index} className="swiper-slide"
              onTouchStart={() =&gt; { onPlaceSelect(index) }}
              onTouchCancel={() =&gt; { onPlaceSelect(index) }}&gt;
                &lt;Package
                   className="swiper-slide"
                   key={index}
                   backgroundImage={Background}
                   modelImage={Model}
                   title="Learn  traditionally"
                   price="15"
                   ref={myRef.current[index]} /&gt;
            &lt;/div&gt;))}
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>So, what is the correct way to initilize it using React hooks?</strong> </p>