title: React fullCalendar - Interaction not working
body: <p>Here I am trying to use FullCalendar on a React project, I need to be able to create events per click. So I followed part of the code:</p>
  <p><a href="https://codesandbox.io/s/github/fullcalendar/fullcalendar-example-projects/tree/master/react?file=/src/DemoApp.jsx" rel="nofollow noreferrer">https://codesandbox.io/s/github/fullcalendar/fullcalendar-example-projects/tree/master/react?file=/src/DemoApp.jsx</a></p>
  <p>The calendar is displayed, I use the api to modify the current day, so I have things that work. But, I can't interact with it. I installed fullCalendar/interaction and specified the plugin in the component, but nothing happens at select &amp; dateclick...
  I put the part of my code, would you have an idea ? :/</p>
  <p>Thanks a lot</p>
  <pre><code>import React, {useEffect, useState, useRef} from 'react'
  import DayPicker from 'react-day-picker';
  import MomentLocaleUtils from 'react-day-picker/moment';
  import 'moment/locale/fr';
  
  import FullCalendar from '@fullcalendar/react'
  import dayGridPlugin from '@fullcalendar/daygrid'
  import timeGridPlugin from '@fullcalendar/timegrid';
  import interactionPlugin from '@fullcalendar/interaction';
  
  const RoomsCalendars = ({match}) =&gt; {
  
      const {id} = match.params
  
      const [selectedDay, setSelectedDay] = useState()
  
      useEffect(() =&gt; {
          setSelectedDay(new Date())
      }, [])
      
      const calendarRef = useRef(null)
  
      const  handleDayClick = day =&gt; {
          setSelectedDay(day);
          let calendarApi = calendarRef.current.getApi()
          calendarApi.gotoDate(day)
      }
  
      const handleTodayClick = day =&gt; {
          setSelectedDay(day)
          let calendarApi = calendarRef.current.getApi()
          calendarApi.gotoDate(day)
      }
  
      return(
          &lt;&gt;
              &lt;h1&gt;Salle {id}&lt;/h1&gt;
              &lt;div className=&quot;row&quot;&gt;
                  &lt;div className=&quot;lg-3 md-4 sm-12&quot;&gt;
                      &lt;div className=&quot;card&quot;&gt;
                          &lt;DayPicker 
                              localeUtils={MomentLocaleUtils}
                              locale=&quot;fr&quot;
                              todayButton=&quot;Aujourd'hui&quot;
                              onDayClick={handleDayClick}
                              selectedDays={selectedDay}
                              onTodayButtonClick={(day) =&gt; handleTodayClick(day)}
                              fixedWeeks 
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;lg-9 md-8 sm-12&quot;&gt;
                      &lt;div className=&quot;card&quot;&gt;
                              &lt;FullCalendar
                                  plugins={[timeGridPlugin, dayGridPlugin,interactionPlugin]}
                                  initialView=&quot;dayGridMonth&quot;
                                  headerToolbar={{
                                      left:'prev,next',
                                      center:'title',
                                      right:'dayGridMonth,timeGridWeek,timeGridDay'
                                  }}
                                  ref={calendarRef}
                                  locale=&quot;fr&quot;
                                  slotMinTime=&quot;07:00:00&quot;
                                  slotMaxTime=&quot;20:00:00&quot;
                                  height={700}
                                  editable={true}
                                  selectable={true}
                                  selectMirror={true}
                                  dayMaxEvents={true}
                                  select={console.log('select')} //NOT WORKING HERE
                                  dateClick={console.log('dateclick')} //SAME
                              /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  
  export default RoomsCalendars
  </code></pre>