title: How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
body: <p>I am using &quot;react-slick&quot; for image slider in next.js project. While using this, console shows this warnings for both 'currentSlide' and 'slideCount' prop on a DOM element.</p>
  <pre><code>Warning: React does not recognize the `currentSlide` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `currentslide` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  in svg (created by ForwardRef(SvgIcon))
  in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
  in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
  in ForwardRef
  in ForwardRef (at HomeProductsSegment.js:560)
  in PrevArrow (created by InnerSlider)
  in div (created by InnerSlider)
  in InnerSlider (created by Slider)
  in Slider (at HomeProductsSegment.js:641)
  in div (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:631)
  in section (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:630)
  in HomeProductsSegment (created by WithStyles(HomeProductsSegment))
  in WithStyles(HomeProductsSegment) (at pages/index.js:417)
  in App (at pages/index.js:409)
  in Home (created by WithStyles(Home))
  in WithStyles(Home) (at _app.tsx:18)
  in MyApp
  in ErrorBoundary (created by ReactDevOverlay)
  in ReactDevOverlay (created by Container)
  in Container (created by AppContainer)
  in AppContainer
  in Root
  
  Warning: React does not recognize the `slideCount` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `slidecount` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  in svg (created by ForwardRef(SvgIcon))
  in ForwardRef(SvgIcon) (created by WithStyles(ForwardRef(SvgIcon)))
  in WithStyles(ForwardRef(SvgIcon)) (created by ForwardRef)
  in ForwardRef
  in ForwardRef (at HomeProductsSegment.js:560)
  in PrevArrow (created by InnerSlider)
  in div (created by InnerSlider)
  in InnerSlider (created by Slider)
  in Slider (at HomeProductsSegment.js:641)
  in div (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:631)
  in section (created by ForwardRef(Grid))
  in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
  in WithStyles(ForwardRef(Grid)) (at HomeProductsSegment.js:630)
  in HomeProductsSegment (created by WithStyles(HomeProductsSegment))
  in WithStyles(HomeProductsSegment) (at pages/index.js:417)
  in App (at pages/index.js:409)
  in Home (created by WithStyles(Home))
  in WithStyles(Home) (at _app.tsx:18)
  in MyApp
  in ErrorBoundary (created by ReactDevOverlay)
  in ReactDevOverlay (created by Container)
  in Container (created by AppContainer)
  in AppContainer
  in Root
  </code></pre>
  <p>also, found this issue in <a href="https://www.npmjs.com/package/react-slick" rel="noreferrer">https://github.com/akiran/react-slick/issues/623</a></p>
  <p>here is the sample code I tried:</p>
  <pre><code>import React from &quot;react&quot;;
  import Slider from &quot;react-slick&quot;;
   
  class SimpleSlider extends React.Component {
    render() {
      var settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1
      };
      return (
        &lt;Slider {...settings}&gt;
          &lt;div&gt;
            &lt;h3&gt;1&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h3&gt;2&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h3&gt;3&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h3&gt;4&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h3&gt;5&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;h3&gt;6&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/Slider&gt;
      );
    }
  }
  </code></pre>
  <p>react-slick: <a href="https://www.npmjs.com/package/react-slick" rel="noreferrer">npm react-slick</a></p>