Как использовать refs React во внутреннем компоненте

Question

Я использовал ссылку в моем response 16 для интеграции Chart Js, но проблема, которую я получаю, заключается в том, что ссылка работает в APP. js, Routing. JS, но не работает во внутренних компонентах ...

Приложение js

componentDidMount(){
let ctx=this.weight;
console.log(ctx);
 }
render() {
return (
  <React.Fragment>
    <RouterIndex />
    <canvas className="chart" ref={ref=>this.weight=ref}>

    </canvas>
  </React.Fragment>

);

}

Вывод в консоль

<canvas class="chart"></canvas>

что правильно

Внутри RouterIndexComponent. js

 let weight=""
 useEffect(()=>{
    let ctx=weight;
    console.log(ctx);
})
return (
    <React.Fragment>
        <Router>
            <Switch>
                <Route exact path="/" component={CovidNormal}  />
                <Route exact path="/country/:country" component={Country} />
            </Switch>
        </Router>
        <canvas className="chart" ref={ref=>weight=ref}>

        </canvas>
    </React.Fragment>
)

Снова вывод в консоль

<canvas class="chart"></canvas>

что снова правильно, но внутри CovidNormal. js component

componentDidMount(){

let ctx=this.weight;
console.log(ctx);
}
render()
{
   return(
   <canvas className="chart" ref={ref => this.weight = ref}>

   </canvas>
   )
}

Результат: undefined Почему это так.