How to use refs React in internal component

Question

I was using reference in my react 16 for integrating ChartJs but the problem that I am getting is the reference is working in APP.js, Routing.JS but not working in internal components...

App.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>

);

}

Output in console

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

which is correct

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

Again output in console

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

which is again correct but inside CovidNormal.js component

componentDidMount(){

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

   </canvas>
   )
}

The output is undefined Why it is so.