uesRef и react-slick не отображаются при обновлении

Я новичок в реагировании, я пытаюсь сделать ползунок с пользовательскими стрелками, используя SlickNext() и slickPrev()

проблема в том, что всякий раз, когда я обновляю страницу или нажимаю ctrl+R, ползунок исчезает, он отображается только всякий раз, когда я изменяю код или удаляю ссылку и нажимаю ctrl+s

Однако при первоначальном рендеринге ссылка не определена. Только после внесения каких-либо изменений в код, сохранения и перезагрузки приложения React оно получает значение

Можете ли вы сказать мне, что я делаю неправильно, и как я могу сделать так, чтобы не было нуля при первоначальном рендере?

Пожалуйста, найдите сокращенный код компонента ниже:

export default class ServicesComponent extends React.Component {
    constructor(props) {
        super(props)
        this.next = this.next.bind(this);
        this.previous = this.previous.bind(this);
    }
    next() { this.slider.slickNext(); }
    previous() { this.slider.slickPrev(); }
    s = [i1, i2, i3, i4]
    render() {
        const settings = {  // setting here };
        return (
            <Slider ref={c => (this.slider = c)}  {...settings}>
                {
                    this.s.length === 0 ? <h3>Loading...</h3> : this.s.map(p => <ServicesSliderCard key={p} data={p} />)
                }
            </Slider>                
        )
    }
}