uesRef and react-slick doesn't render when refresh

Question

I'm new to react, I'm trying to make a slider with custom arrows, using SlickNext() and slickPrev()

the problem is whenever I refresh the page or hit ctrl+R the slider disappears, it only shows whenever I modify the code or delete the ref and hit ctrl+s

However, on the initial render, the ref is undefined. Only after I make any sort of changes to the code, save and the React app reloads it gets the value

Can you tell me what I'm doing wrong and how I can make it so that is not null on the initial render?

Please find the abbreviated code for the component below:

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>                
        )
    }
}