React Big Calendar: Events rendering via state bug

When I add an event by clicking on the day or the add event button, the events render via state. After adding two events, when I add an event the state is one step behind. So I have to refresh the page for the event to render or when I add another event the previous event renders (also applies to edit and delete). Is there a way to fix this?

//Gets all events
    useEffect(() => {
        const bkg = localStorage.getItem("calendarClass") || "";
        setCalClassState(bkg);
        API.getEvent()
            .then(({ data }) => {
                renderEvents(data);
            }).catch(err => console.log(err));
    }, []);

    function getEvents() {
        API.getEvent()
            .then(({ data }) => {
                renderEvents(data);
            }).catch(err => console.log(err));
    };

    //Render events to calendar
    function renderEvents(appointments) {
        console.log('---', appointments);
        for (var i = 0; i < appointments.length; i++) {
            appointments[i].start = new Date(appointments[i].startDate);
            appointments[i].end = new Date(appointments[i].endDate);
        }
        setEventState(appointments)
    };
    async function handleSubmit(e) {
        e.preventDefault();
        console.log("handle submit clicked")
        // setShowEventModal(false)
        await API.addEvent({
            title: titleState,
            startDate: startDate,
            endDate: endDate,
            startTime: startTime,
            endTime: endTime,
            notes: noteState,
            userId: userId
        })
        getEvents();
        console.log('Submit clicked')
        handleEventModalClose();
        handleDayModalClose();   
    };