Schedule.js

import React from 'react'
import axios from 'axios';
import { connect } from 'react-redux';

import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction' // needed for dayClick

class Schedule extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      calendarWeekends: true,
      calendarEvents: [ // initial event data
        { title: 'Event Now', start: new Date() }
      ]
    }
  }

  calendarComponentRef = React.createRef()


  componentWillMount() {
    this.props.getBookings().then(this.setState({ calendarEvents : this.props.calendarEvent }))  // this.props.calendarEvent = []

  }


  componentDidMount() {

//     this.props.getBookings().then(this.setState({ calendarEvents : this.props.calendarEvents }))

  }

  render() {

    const { bookings } = this.props;

    return (
        <>
          <button onClick={ this.toggleWeekends }>Afficher les weeks ends</button>&nbsp;
          <button onClick={ this.gotoPast }>Sélectioner une date pass</button>&nbsp;
          (also, click a date/time to add an event)
          <FullCalendar
            defaultView="dayGridMonth"
            header={{
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            }}
            plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            ref={ this.calendarComponentRef }
            weekends={ this.state.calendarWeekends }
            events={ this.state.calendarEvents }
            dateClick={ this.handleDateClick }
            />
        </>
    )
  }


}

const mapStateToProps = (state, ownProps) => {
  return {
    calendarEvents: state.booking.bookings
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    getBookings: () => {
      return axios.get(`http://localhost:8000/booking/all`).then((res) => {
        dispatch({
          type: 'INIT_LIST_OF_BOOKINGS',
          bookings: res.data
        });
      })
    }
  };
};

const ConnectedSchedule = connect(
  mapStateToProps,
  mapDispatchToProps
)(Schedule);

export default ConnectedSchedule;

bad pattern using, the props from store to update the state of the component, better to directly use the incoming props from the store.