React ref not being called before componentDidMount

Question

I'm trying to follow this example in my project but I couldn't make it work https://react-slick.neostack.com/docs/example/as-nav-for I think the reason is:

1. It needs a ref to both objects to sync them
2. It is supossed to be synced with the state setted in componentDidMount()
3. When the state is setted the refs are undefined

I thought ref callback are suppossed to execute before componentDidMount(), but that's not the case:

Bits of my code:

 Component {
   state = {
      topNav: null,
      bottomNav: null
   }

  componentDidMount () {
       console.log("componentDidMount being called : slider1 : " + this._topSlider + " slider 2 : " + this._bottomSlider)
       this.setState({
          topNav: this._topSlider,
          bottomNav: this._bottomSlider
        });
   }

   render() {

     console.log("render being called")
     ...

     <Slider
         asNavFor={this.state.bottomNav}
         ref={(slider) => {
              this._topSlider = slider
              console.log("topslider ref being called" + this._topSlider )
          }}
      >
     ...
     </Slider>

     <Slider
        asNavFor={this.state.topNav}
        ref={(slider) => {
          this._bottomSlider = slider
          console.log("bottomslider ref being called"+this._bottomSlider)
        }}
        slidesToShow={3}
        swipeToSlide={true}
        focusOnSelect={true}
      >
    ...
    </Slider>
    ...
}

---

these are the logs:

Similar Question: componentDidMount called BEFORE ref callback