reactjs - クラスコンポーネントを使用してReactjsの親コンポーネントからマルチレベルの子コンポーネントの関数を呼び出す方法

Question

React.createRef() を使用して親コンポーネントから子コンポーネントに存在する関数を呼び出さなければならないという要件がありますが、ここでの問題はそれがマルチレベルの子であるということです。

「ChildComponent1」コンポーネントに存在する関数を呼び出すことはできますが、「親」コンポーネントから「ChildComponent2」コンポーネントに存在する関数を呼び出すことはできません。これを行う正しい方法を教えてください。

これは私のparent.jsファイルです

import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';

class ParentComponent extends Component {
   constructor(props) {
        super(props);
        this.childRef = React.createRef();
    }
    
    callFunctionFromChild = () => {
        this.ref.current.doSomething()
    }
    
    render() {
        return (
            <div>
                <ChildComponent1 ref={this.childRef} />
                <button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
            </div>
        );
    }
}

export default ParentComponent;

これは私の ChildComponent1.js ファイルです:

import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';

class ChildComponent1 extends Component {
    render() {
        return (
            <div>
                <ChildComponent2 ref={this.props.ref} />
            </div>
        );
    }
}

export default ChildComponent1;

これは私の内部 ChildComponent2.js ファイルです:

import React, { Component } from 'react';

class ChildComponent2 extends Component {
    
    doSomething = () => {
        console.log("Something is done!!");
    }
    
    render() {
        return (
            <div>
                My Child Component
            </div>
        );
    }
}

export default ChildComponent2;