I have the following React app with a Slick carousel. I created a custom Next button and need to execute the slickNext() method to proceed to the next slide. The Slick carousel docs and some of the answers for questions have mentioned the following way to call slickNext() method.

The problem is I'm getting the error slider.slick is not a function.

This is what I have tried so far

gotoNext = () => {

    var slider = document.getElementsByClassName("sliderMain")[0];

    console.log("set", slider)

    slider.slick("slickNext");

}



const SampleNextArrow = (props) => {

        const { className, style } = props;

        return (

            <div

                className={className}

                onClick={this.gotoNext}

            />

           );

        }



    const settings = {

        dots: true,

        infinite: false,

        speed: 500,

        slidesToShow: 1,

        slidesToScroll: 1,

        swipe: false,

        nextArrow: <SampleNextArrow className="customSlickNext" />,

    };



    <Slider

       id="sliderMain"

       {...settings}

       className="sliderMain"

       afterChange={this.changeSlide}

    >{ /* slider goes here */}

    </Slider>

How can I solve this?