Обновить календарь, когда новое событие создается в реагировать JS

Question

Я использую реагирующий большой календарь. Я могу опубликовать новое событие, и когда я ссылаюсь на страницу, в календаре отображается последнее событие, но я хочу добиться этого в реакции без обновления страницы. Это мой код.

Используется для создания новых событий

   slotSelected(slotInfo) {
    console.log(slotInfo);
    let provider_id = 1;

    axios.post('/api/v1/provideravailability/' + provider_id + '/store', slotInfo, {
        headers: {
            'x-api-key': 'some_key',
            'Content-Type': 'application/json',
        }
    }).then(response => {

        if ('SUCCESS' === response.data.response) {
            this.fetchTutorFreeSlots(response);

        }

    }).catch(error => {
        console.log(error.response)
    })
}

eventSelected(eventInfo) {
    console.log(eventInfo);
}

Это когда страница загружается

    componentDidMount() {

    let provider_id = 1;
    let slots = [];
    axios.get('/api/v1/provideravailability/' + provider_id + '/fetch', {
        headers: {
            'x-api-key': 'some_key',
            'Content-Type': 'application/json',
        }
    }).then(response => {
        if (response.data.response === "SUCCESS") {
            this.fetchTutorFreeSlots(response);
        }

    }).catch(error => {
        console.log(error.response)
    })
}

Для получения

    fetchTutorFreeSlots(response) {
    let availableSlots = response.data.data;

    var freeSlots = availableSlots.map(obj => {

        var slotObj = {};
        delete   obj.duration;

        slotObj['start'] = new Date(obj.start * 1000);
        slotObj['end'] = new Date(obj.end * 1000);
        slotObj['title'] = "Book";
        return slotObj;
    });

    this.setState({availability: freeSlots});
    this.render(); // I want to update calendar view here
}

    render() {

    return <MyCalendar selectable={this.state.selectable} allEvents={this.state.availability}
                       eventSelected={this.eventSelected}
                       slotSelected={this.slotSelected}/>
}const calendarStyle = {
marginTop: '10px'

};

Вот как я использую свой Календарь.

const MyCalendar = props => (

<div id="mycalendar" style={calendarStyle}>
    <Calendar
        defaultDate={new Date()}
        defaultView="day"
        events={props.allEvents}
        style={{height: "50vh", width: "60vh"}}
        selectable={props.selectable}
        onSelectSlot={props.slotSelected}
        onSelectEvent={props.eventSelected}
    />

</div>

);

API в порядке и возвращает правильный формат