DemoApp.jsxの変更が反映されない

前提・実現したいこと

https://fullcalendar.io/docs/react
fullcalenderライブラリを触っていますが、DemoApp.jsxの変更が表示に反映されません。
これはこのライブラリのバグでしょうか。それともReactの仕様上何か施す必要があるのでしょうか。

該当のソースコード

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
</head>

<body>
  <div id='root'></div>
  <script src='dist/main.js'></script>
</body>

</html>

main.jsx

import React from 'react'
import { render } from 'react-dom'
import DemoApp from './DemoApp'

render(<DemoApp />, document.getElementById('root'))

DemoApp.jsx

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'

import './main.scss'

export default class DemoApp extends React.Component {

  calendarComponentRef = React.createRef()
  state = {
    calendarWeekends: true,
    calendarEvents: [ // initial event data
      { title: 'Event', start: new Date() }/////イベント名を変えても'Event now'から表示が変わらない
    ]
  }

  render() {
    return (
      <div className='demo-app'>
        <div className='demo-app-top'>
          <button onClick={this.toggleWeekends}>toggle weekends</button>&nbsp;
          <button onClick={this.gotoPast}>go to a date in the past</button>&nbsp;
          (also, click a date/time to add an event!!)
          <button>OK</button>/////追加しても変われない
        </div>
        <div className='demo-app-calendar'>
          <FullCalendar
            defaultView="dayGridMonth"
            header={{
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            }}
            schedulerLicenseKey="GPL-My-Project-Is-Open-Source"
            plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, resourceTimelinePlugin]}
            ref={this.calendarComponentRef}
            weekends={this.state.calendarWeekends}
            events={this.state.calendarEvents}
            dateClick={this.handleDateClick}
          />
        </div>
      </div>
    )
  }

  toggleWeekends = () => {
    this.setState({ // update a property
      calendarWeekends: !this.state.calendarWeekends
    })
  }

  gotoPast = () => {
    let calendarApi = this.calendarComponentRef.current.getApi()
    calendarApi.gotoDate('2000-01-01') // call a method on the Calendar object
  }

  handleDateClick = (arg) => {
    if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {
      this.setState({  // add new event data
        calendarEvents: this.state.calendarEvents.concat({ // creates a new array
          title: 'New Event',
          start: arg.date,
          allDay: arg.allDay
        })
      })
    }
  }

}