React Pattern for Sequentially updating A series of data dependent components

I have 4 components they are dropdowns, when a value is selected from one this loads the data for the second and so on ...

I have something working by doing something like ... (note omitted rest of code for brevity)

render() {
    let dropdown1 = this.state.dropdown1.map(drop1 => {
        return (
                <option key={drop1.id} value = {drop1.id}>{drop1.name}</option>
        )
    })
    return (
        <div>
            <select value={this.state.value} onChange={this.handleChange}>{dropdown1}</select>
            {this.state.value ? <Dropdown2 id={this.state.value} /> : null}
        </div>
    )

So Dropdown1 renders itself and conditionally the following dropdown and so on ... Whilst this method works, in that updating Dropdown1 will update Dropdown2 - the changes won't propagate beyond the next component.

Is there a better pattern to use to update a hierarchy of components ?