title: nextArrow and prevArrow button not working in react-slick
body: <p>I am using react-slick in my reactjs application. I am trying to implement next and prev arrows in slider. But this is not working. Here is my code</p>
  
  <p>Here is my "settingss" variable which gets applied to  </p>
  
  <pre><code>var settingss ={
      infinite: false,
      slidesToScroll: 1,
      slidesToShow: 3,
      arrows:true,
      prevArrow: document.getElementsByClassName("a-left"),
      nextArrow: document.getElementsByClassName("a-right"),
      variableWidth: false,
      responsive: [{
          breakpoint: 920,
          settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              // arrows: true,
  
          }
      }]
  }
  </code></pre>
  
  <p>and here is my slider code. </p>
  
  <pre><code>return  &lt;div className={`card-item ${container_class}`}&gt;
      &lt;div className="bg"&gt;
          &lt;div className="arrows"&gt;
              &lt;div className="a-left"&gt;
                  &lt;span className="fa fa-chevron-left"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;div className="a-right"&gt;
                  &lt;span className="fa fa-chevron-right"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className="dp-circle"&gt;&lt;/div&gt;
          &lt;div className="dp-name"&gt;John
              &lt;div className="dp-location"&gt;NYC&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;Slider {...settingss} className="fg-items"&gt;
          {item.activities.map((item1,i)=&gt;{
              return &lt;div className="react-inter"&gt;
                  &lt;div className="img"&gt;&lt;/div&gt;
                  &lt;div className="info"&gt;
                      &lt;div className="caption"&gt;
                          This is for test
                      &lt;/div&gt;
                      &lt;div className="tags"&gt;
                          &lt;div className="visual"&gt;Visual&lt;/div&gt;
                          &lt;div className="visual"&gt;Text&lt;/div&gt;
                          &lt;div className="visual"&gt;Edited&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="buttons"&gt;
                          &lt;div className="tick"&gt;
                              &lt;span className="fa fa-check"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className="cross"&gt;
                              &lt;span className="fa fa-times"&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          })}
      &lt;/Slider&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using the guidelines as per documentation. What am I doing wrong? </p>