Кнопка nextArrow и prevArrow не работает в режиме реакции

Я использую response-slick в своем приложении reactjs. Я пытаюсь реализовать стрелки вперед и назад в слайдере. Но это не работает. Вот мой код

Вот моя переменная "settingss", которая применяется к

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,

        }
    }]
}

и вот мой код слайдера.

return  <div className={`card-item ${container_class}`}>
    <div className="bg">
        <div className="arrows">
            <div className="a-left">
                <span className="fa fa-chevron-left"></span>
            </div>
            <div className="a-right">
                <span className="fa fa-chevron-right"></span>
            </div>
        </div>
        <div className="dp-circle"></div>
        <div className="dp-name">John
            <div className="dp-location">NYC</div>
        </div>
    </div>
    <Slider {...settingss} className="fg-items">
        {item.activities.map((item1,i)=>{
            return <div className="react-inter">
                <div className="img"></div>
                <div className="info">
                    <div className="caption">
                        This is for test
                    </div>
                    <div className="tags">
                        <div className="visual">Visual</div>
                        <div className="visual">Text</div>
                        <div className="visual">Edited</div>
                    </div>
                    <div className="buttons">
                        <div className="tick">
                            <span className="fa fa-check"></span>
                        </div>
                        <div className="cross">
                            <span className="fa fa-times"></span>
                        </div>
                    </div>
                </div>
            </div>
        })}
    </Slider>
</div>

Я использую рекомендации согласно документации. Что я делаю неправильно?