Toolbar not working after firing onNavigate method in react-big-calendar

Question

I am new to react-big-calender. I have a small calendar on the sidebar and onClick of a date in the small calendar I am navigating the clicked week of the date in the big calendar (week view) and it works fine. But if I navigate first manually by clicking the date in the small calendar the toolbar buttons (Today,Back,Next) stop working and I will be only able to navigate by clicking the small calendar. If I use (Today,Back,Next) buttons on first render those buttons works fine but stops working after I fire the onNavigate method manually. Is there a workaround for this? Thanks in advance. my-app

// all imports here

const locales = {
  "en-US": require("date-fns/locale/en-US"),
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
});



function App() {
  const [newEvent, setNewEvent] = useState({ title: "", start: "", end: "" });
  const [clickedEvent, setClickedEvent] = useState({});
  const [clickedSlot, setClickedSlot] = useState({});
  const [showModal, setShowModal] = useState(false);
  const [smallDate, setSmallDate] = useState();
  const [date, setDate] = useState(smallDate);

  const showEvent = (event) => {
    console.log(clickedEvent);
    setClickedEvent(event);
  };

  const handleSlotClick = (slot) => {
    console.log(clickedSlot);
    setClickedSlot(slot);
  };

  //get clicked date from small calendar to App component
  const getDate = (arg) => {
    setSmallDate(arg);
    console.log(smallDate);
  };

  const eventStyleGetter = (event, start, end, isSelected) => {
    var backgroundColor = "#" + event.hexColor;
    var style = {
      backgroundColor: backgroundColor,
      borderRadius: "5px",
      opacity: 0.9,
      color: "black",
      border: "0px",
      display: "block",
      overflow: "scroll",
    };
    return {
      style: style,
    };
  };

  const calendarStyles = () => {
    return {
      height: 500,
      width: "100%",
      marginLeft: "50px",
      marginRight: "50px",
    };
  };

  return (
    <div className="App">
      <Sidebar getDate={getDate} />
      <Calendar
        popup={true}
        popupOffset={30}
        formats={{ timeGutterFormat: "HH:mm" }}
        localizer={localizer}
        events={events}
        selectable={true}
        startAccessor="start"
        endAccessor="end"
        style={calendarStyles()}
        defaultView="week"
        views={["week", "month"]}
        onSelectEvent={(event) => {
          showEvent(event);
          setShowModal(true);
        }}
        onSelectSlot={(slot) => {
          handleSlotClick(slot);
        }}
        eventPropGetter={eventStyleGetter}
        components={{
          event: CustomEvent,
        }}
        // defaultDate={date}
        date={smallDate}
        onNavigate={(date) => {
          setDate(date);
        }}
      />
      <Modal show={showModal} onClose={() => setShowModal(false)} />
    </div>
  );
}

export default App;