FullCalendar not rerendering

I am trying to make it so that when a date is clicked, it goes to the day view of that day.

Here is my code:

import dayGridPlugin from "@fullcalendar/daygrid";
import FullCalendar from "@fullcalendar/react";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useState, useEffect } from "react";

export default function Calendar(props) {
  const [selectedDate, setSelectedDate] = useState(null);
  const [view, setView] = useState("dayGridMonth");

  

  const handleDateClick = (info) => {
    //window.location.href = route("activity.create", { date: info.dateStr });
    setSelectedDate(info.dateStr);
    setView("timeGridDay");
  };

  useEffect(() => {
    console.log("Selected Date:", selectedDate);
    console.log("View:", view);
  }, [selectedDate, view]);

  return (
    <FullCalendar
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      initialView={view}
      selectable="true"
      selectOverlap="false"
      height="80vh"
      initialDate={selectedDate}
      themeSystem="standard"
      headerToolbar={{
        start: "today prev,next",
        center: "title",
        end: "dayGridMonth, timeGridWeek, timeGridDay",
      }}
      dateClick={handleDateClick}
    />
  );
}

I know the date selection works as I have used alert to verify this, I also logged in the console the change and the date and view variables are being set correctly. It just seems to me that fullCalendar is just not rerendering.

You can use ref property of FullCalendar in order to use Calendar Date and View API methods programmatically like this:

import dayGridPlugin from '@fullcalendar/daygrid';
import FullCalendar from '@fullcalendar/react';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import { useState, useEffect, useRef } from 'react';

export default function Calendar(props) {
  const [selectedDate, setSelectedDate] = useState(null);
  const [view, setView] = useState('dayGridMonth');
  const calendarRef = useRef(null);

  const handleDateClick = (info) => {
    //console.log(info);
    setSelectedDate(info.dateStr);
    setView('timeGridDay');
  };

  useEffect(() => {
    console.log('calendarRef.current:', calendarRef.current);
    console.log('Selected Date:', selectedDate);
    console.log('View:', view);
    if (calendarRef.current) {
      calendarRef.current.calendar.changeView(view);
      if (selectedDate) {
        calendarRef.current.calendar.gotoDate(selectedDate);
      }
    }
  }, [selectedDate, view, calendarRef.current]);

  return (
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
      initialView={view}
      selectable="true"
      selectOverlap="false"
      height="80vh"
      initialDate={selectedDate}
      themeSystem="standard"
      headerToolbar={{
        start: 'today prev,next',
        center: 'title',
        end: 'dayGridMonth, timeGridWeek, timeGridDay',
      }}
      dateClick={handleDateClick}
    />
  );
}

You can take a look at this StackBlitz for a live working example.