Реагировать на эталонный метод дочернего запуска Native Run из другого компонента

Question

Я пытаюсь запустить метод компонента другого компонента. Я пытаюсь это с помощью реагировать реф. Я также перехожу по этой ссылке: https://medium.freecodecamp.org/react-changing-state-of-child-component-from-parent-8ab547436271 Но моя структура немного сложнее.

List.js

class List extends Component {

    constructor(){
        super()
        this.LoadCounterElement = React.createRef()
    }

    render(){
        return(
            <View>
                <ItemGenerator />
                <LoadCounter ref={this.LoadCounterElement}/>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter.counter
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(List);

ItemGenerator.js

class ItemGenerator extends Component {

    render() {
        return (
            <ScrollView>
                {
                    this.state.data.map((item, index) => {
                        return(<ItemList navigate={this.props.navigate} data={item} key={index}/>)
                    })
                }
            </ScrollView>
        )
    }

}

LoadCounter.js

class LoadCounter extends Component {

    constructor(props) {
        super(props)
        this.state = {
            count : 0,
        }
    }

    componentDidMount() {
        this._renderCount()
    }

    _renderCount = () => {
        this.setState({count:this.props.counter})
    }

    render(){
        return(
            <View>
                <Text>{this.state.count}</Text>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
        counter: state.counter.counter
    }
}

export default connect(mapStateToProps)(withNavigation(LoadCounter));

ItemList.js

class ItemList extends Component {
    render() {
        return(
            <View>
                <TouchableOpacity onPress={() => {
                    this.props.increaseCounter()
                    this.LoadCounterElement.current._renderCount()
                }}>
                    <Card containerStyle={{margin: 0}}>
                        <View style={{flex:1, flexDirection:'row', height:70, alignItems:'center', justifyContent:'space-between'}}>
                            <View style={{flexDirection:'row', alignItems:'center', width:'55%'}}>
                                <View style={{flexDirection:'column', marginLeft:10}}>
                                    <Text style={{...}}>{this.props.data.name}</Text>
                                </View>
                            </View>
                        </View>
                    </Card>
                </TouchableOpacity>
            </View>
        )
    }
}

function mapDispatchToProps(dispatch) {
    return {
        increaseCounter: () => dispatch({ type: 'INCREASE_COUNTER' }),
        decreaseCounter: () => dispatch({ type: 'DECREASE_COUNTER' }),
    }
}

export default connect(mapStateToProps)(ItemList);

counterReducer.js

const initialState = {
    counter: 1
}
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREASE_COUNTER':
            return { counter: state.counter + 1 }
        case 'DECREASE_COUNTER':
            return { counter: state.counter - 1 }
    }
    return state
}

export default counterReducer;

Как вы можете видеть в ItemLiist Component, я пытаюсь запустить метод _renderCount, который находится в Component LoadCounter. Но это не работает. Пожалуйста, руководство, что я пропускаю?