In React, what's the preferred design pattern for communicating data between a nested node and a sibling in a different branch?

I have a scenario where I'm a bit confused on how to approach. I feel like there's a lot of refactoring to be done if I were to communicate from the lowest level all the way back up to the parent. I'm very new to using React (a few days now) and I don't know if there's an easier solution to communicate data between components. I've read some sources that said child to parent to other child is best, but I haven't seen mentions of great-great-grandchildren to parent to a child. I've seen mentions about Context API, ComponentDidMount/Update, but I'm not sure what the best approach is.

I'm creating a data explorer on this webpage so we have the RootComponent, LeftPanel, and Graph component.

The LeftPanel holds an Explorer component, which will go through multiple levels of data. On the last level of data, if clicked, it should display a Graph component (through conditional rendering).

ex:

The Parent

export default class RootComponent extends React.Component {
    render() {
        return (
            <div className="flex-row flex-grow">
                <LeftPanel />

                 //Need to conditionally render this
                <Graph />
            </div>
        )
    }
}

LeftPanel is a container within the parent that will hold an explorer

export default class LeftPanel extends React.Component {
  ... (bunch of other logic)

    render() {
        return (
            <Card className="flex-column default-vertical-spacing">
                <div className="content">
                    <Explorer 
                        ..........>
                </div>
            </Card>
        )
    }

}

Explorer holds data as well as a "Pill" or button to click which will show further levels of data

export default class Explorer extends React.Component<IExplorerProps> {

    ... (bunch of logic)

    render() {
      if(!this.props.items || this.props.items.length == 0){
        return <span>Loading</span>
      }
      return ( 
              <ExpandablePill 
              ............../>

      )
    }
}

ExpandablePill is data that can keep going downward

export default class ExpandablePill extends React.Component<ExpandablePillProps, ExpandablePillState> {

    render() {
        ...
        //Here I want to do: If this ExpandablePill was clicked AND it has no children, display a graph.
    }
}

This is under the parent RootComponent but I need to know if an ExpandablePill with no levels left was clicked to display a graph (or make it known to the parent-RootComponent that I can display a graph now)

export default class Graph extends React.Component {  
 render() {
        return (

                        <LineChart
                         ...
                        </LineChart>

        );
    }
}

Any suggestions would be appreciated! I apologize if this is a duplicate.