FullCalendar is not updating after React state change

I am using FullReact calendar (https://fullcalendar.io/docs/react) in my own wrapper component (Calendar):

    const Calendar = (props) => {
      const [isMonthlyViewEnabled, setIsMonthlyViewEnabled] = useState(true);
    
      return (
        <Card fluid>
          <Card.Content>
            <FullCalendar
              defaultView={isMonthlyViewEnabled ? "dayGridMonth" : "timeGridWeek"}
              plugins={[dayGridPlugin, timeGridPlugin]}
              events={props.events}
            />
          </Card.Content>
            <Card.Content extra>
               <Button primary>Add Appointment</Button>
                <Button color={'green'} onClick={() => setIsMonthlyViewEnabled(!isMonthlyViewEnabled)}>
                    Switch to {isMonthlyViewEnabled ? "weekly" : "monthly"} view
                </Button>
            </Card.Content>
        </Card>
      );
    };

Initially, the button will display the text: ‘Switch to weekly view’. Upon click, it will flip isMonthlyViewEnabled and switch the name of the button to ‘Switch to monthly view’ and the defaultView of FullCalendar to “timeGridWeek”.

However, when I click the button, the button text is changing as expected (so I know the state is working correctly), but the FullCalendar default view is not changing. Does anyone know how I can make the FullCalendar component rerender with the proper defaultView?

[rustamfetullayev]

Basically you can use asynchronous function and re-render FullCalendar component. For example if you want to add new event locally:

export const App = () => {
  let [events, setEvents] = React.useState([]);
  let [isAwaiting, setIsAwaiting] = React.useState(false);
  const onSelect = async (data) => {
    let { start, end } = data;
    await setIsAwaiting(true);
    setEvents(
      events.concat({
        title: new Date().getTime(),
        start: moment(start).format("YYYY-MM-DD HH:mm"),
        end: moment(end).format("YYYY-MM-DD HH:mm"),
      })
    );
    setIsAwaiting(false);
  };

  return (
    <div className="App">
      {!isAwaiting && (
        <FullCalendar
          defaultView="timeGridWeek"
          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
          header={{
            left: "prev,next today",
            center: "title",
            right: "dayGridMonth,timeGridWeek",
          }}
          firstDay={1}
          allDaySlot={false}
          editable
          selectable
          select={onSelect}
          events={events}
          eventLimit
          slotDuration={{ minutes: 10 }}
          slotLabelInterval={{ minutes: 10 }}
          slotLabelFormat={{
            hour: "numeric",
            minute: "2-digit",
            meridiem: false,
            hour12: false,
          }}
          columnHeaderFormat={{ weekday: "long" }}
        />
      )}
    </div>
  );
};

[ErAz7]

in the example above, I wanted to show changing state does not re-render the calendar so I disabled built-in buttons to make it more clear in my real use case, header is different so I prefer to implement it myself to have full control over it instead of dealing with customization. I know I can change view using API via refs (which I already do in my project) but I expected FullCalendar re-render on prop changes (which still makes sense)

and by the way, lemme thank you for this great work, it saves days for devs