Как обновить компонент ReactJS после запроса на выборку?

Привет, Я пытаюсь обновить реагирующий компонент, который не работает. Когда пользователь нажимает кнопку на дочернем компоненте, на мой api отправляется почтовый запрос. Цель этого компонента - создать список этих событий:

1. Сначала запрос на мой api для тех,
2. Затем пройдите через идентификаторы событий и для каждого сделайте запрос на выборку на внешний api, где информация о событиях всегда обновляется.
3. Поскольку каждое событие запрашивается из внешнего api, результаты переносятся в пустой массив
4. и, наконец, состояние устанавливается, когда новое событие помещается в массив.

Это работает, но когда новое событие сохраняется в моем api, этот компонент не будет повторно отображать. Вот мой код, который не обновляется:

class EventList extends Component {

constructor(props){
    super(props)
    this.state = {
        userEvents: []
    }
}

//Create a function to load active user's saved events in api
loadEvents = () => {
    const ActiveUser = JSON.parse(localStorage.getItem("ActiveUser"))

    //Get active user's events from vetharbor.json
    fetch(`http://localhost:8088/events?userId=${ActiveUser.id}`)

    //convert get to json data
    .then(r => r.json())

    .then(allEvents => {
        let events = []
        //for each event tied to active user's id, loop thru and ...
        allEvents.forEach(event => {

            //make a fetch request to eventbrite with the event's id
            fetch(`https://www.eventbriteapi.com/v3/events/${event.id}/?token=MY_API_Token`)

            //convert response to json
            .then(r => r.json())

            //return the data???
            .then(ue => {
               events.push(ue)
               // this.userEvents = events
                this.setState({
                    userEvents: events
                })
            })
        }) 
    })
}

    shouldComponentUpdate(nextProps, nextState){
    if(this.state.userEvents !== nextState.userEvents){
        return true
    }

}

componentDidUpdate(){
    this.loadEvents()
}

//run the function in a component did mount
componentDidMount(){
    console.log("component did mount")
    this.loadEvents()
}

render() {

    return (
        <div className="event-list">
        <h3>These are events</h3>
        {this.state.userEvents.map(ues => {
           return <h1 key={ues.id}>{ues.name.text}</h1>
        })}

        </div>
        );

    }
}

export default EventList