I need to call an API in a child component from a grandchild that is a child of another child of the main(parent) component. Here is the structure of my components.

```
function MainComponent(){
    return(
        <div>
            <Child1Component />
            <Child2Component />
        </div>
    )
}

function Child1Component(){
    return(
        <div>
            <ModalComponent />

        </div>
    )
}

function ModalComponent(){

    const upadate = () => {
        //call API in Child2Component
    }

    return(
        <div>         
        </div>
    )
}

function Child2Component(){

    const fetch = () => {
        axios.get(ULR + '/api/mymethod').then(respose =>{

        })
    }

    return(
        <div>           
        </div>
    )
}

```

If there is an update in `<ModalComponent/>` that is a child of `<Child1Component/>`, an API call should get executed in the `<Child2Component/>` so that the Child2Component can get updated, I mean its state should get updated after the API call.

Please anyone could help me with this.