Update react-big-calendar component when new event created

I am using react-big-calendar and wish to give the user the ability to create a new event when they drag the mouse over the calendar to select a date/time range as per the create events demonstration.

However the code I have written does not re-render the component on successful event creation. The user is able to create a new event and it will be displayed if the user selects another view (e.g. Agenda) - and will then be present in all views. However it does not display immediately in the current view as per the demo.

I'm fairly sure the answer to this lies in useEffect; but I'm going round in circles trying to figure it out.

import React, { useState  } from 'react';
import './App.css';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

function MyCalendar() {
    const localizer = momentLocalizer(moment)
    const [eventsList, setEventsList] = useState([]);

    function handleSelect ({ start, end }) {
        const title = window.prompt('New Event name')
        if (title) {
            var newEvent = {
                start: start,
                end: end,
                title: title 
            }
            let updateEventsList = eventsList;
            updateEventsList.push(newEvent);
            setEventsList(updateEventsList);
        }
    };

    return (
        <div>
        <Calendar
        selectable
        defaultView="week"
        defaultDate={new Date()}
        localizer={localizer}
        events={eventsList}
        startAccessor="start"
        endAccessor="end"
        style={{ height: 500 }}
        onSelectSlot={handleSelect}
        />
        </div>
    )
}

function App() {
    return (
        <div>
        <MyCalendar />
        </div>
    );
}

export default App;