title: React FullCalendar Unable to add new event to the calendar after updating the state
body: <p>I am not really sure what I am doing wrong here. Maybe it is a simple error. Any help would be appreciated. I get the following error in react.</p>
  
  <p><a href="https://i.stack.imgur.com/RT4Sr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RT4Sr.png" alt="enter image description here"></a></p>
  
  <p>The inital render is fine but the error occurs on the rerender with the new state.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useReducer, useRef, useState } from 'react';
  import * as reducer from './reducers'
  import * as actions from './actions'
  import "@fullcalendar/core/main.css";
  import "@fullcalendar/daygrid/main.css";
  import FullCalendar from "@fullcalendar/react";
  import dayGridPlugin from "@fullcalendar/daygrid";
  import interactionPlugin from "@fullcalendar/interaction";
  import timeGridPlugin from "@fullcalendar/timegrid";
  //import events from '../Columns/events'
  const _events = [
      { title: "event 1", start: "2020-04-01", end: "2020-04-03" },
      { title: "event 2", start: "2020-04-04", end: "2020-04-06" }
    ]
  const Calendar = props =&gt; {
      //const [calendarEvents, dispatchEvents] = useReducer(reducer.events, _events)
      const [calendarEvents, setEvents] = useState(_events)
  
      const calendarRef = useRef()
  
      function confirmation(dateInfo) {
          console.log(`dateInfo:`, dateInfo);
          let answer = window.confirm("create event?")
          if(answer){
              const payload = { title: "event " + calendarEvents.length, start: "2020-04-07", end: "2020-04-09" }
              //dispatchEvents({type: actions.EVENT_ADD, payload})
              setEvents([...calendarEvents, payload])
              //calendarRef.current.props.events = [...calendarEvents, payload]
              console.log(calendarRef.current);
          }
      }
      debugger;
      return(
          &lt;&gt;
          &lt;FullCalendar
          ref={calendarRef}
          defaultView="dayGridMonth"
          plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
          events={calendarEvents}
          editable
          eventResizableFromStart
          selectable
          //eventOverlap={false}
          dateClick={confirmation}
          eventBackgroundColor="#001532"
          eventColor="white"
          eventTextColor="white"
          header={{
              left: 'prev,next today',
              center: 'test title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
          }}
          eventClick={console.log}
        /&gt;
          &lt;/&gt;
      )
  }
  
  export default Calendar</code></pre>
  </div>
  </div>
  </p>