How to change to week and days according to current views

I am customizing react big calendar toolbar, and it's working fine for switching month, but the issue is i am unable to switch week and days according to the current views. In every views next , prev button change the month. This is custom toolbar for navigating

const CustomToolbar = (toolbar, open, setOpen) => {
  const goToBack = () => {
    toolbar.date.setMonth(toolbar.date.getMonth() - 1);
    toolbar.onNavigate("prev");
  };
  const goToNext = () => {
    toolbar.onNavigate("next");
    toolbar.date.setDays(toolbar.date.getDay() + 1);
    //i want to change the dates state according to current view 
   
  };
  const goToWeekView = () => {
    toolbar.onView("week");
  };
  const goToMonthView = () => {
    toolbar.onView("month");
  };
  const goToDayView = () => {
    toolbar.onView("day");
  };
  const goToAgendaView = () => {
    toolbar.onView("agenda");
  };
  return (
    <Stack>
      <Box className="back-next-buttons">
        <Stack direction="row" alignItems="center">
          <IconButton onClick={goToBack} className="btn-back">
            <ArrowBackIosIcon />
          </IconButton>
          <Typography
            onClick={goToCurrent}          >
            Today
          </Typography>

          <IconButton onClick={goToNext} className="btn-back">
            <ArrowForwardIosIcon/>
          </IconButton>
        </Stack>
      </Box>
      {/* date label */}
      <Typography>
        {label()}
      </Typography>
      {/* view buttons */}
      <Stack direction="row" flexWrap="wrap" alignItems="center">
        <SmallButton
          onClick={goToWeekView}
          label="Week"/>
        <SmallButton
          onClick={goToMonthView}
          label="Month"/>
        <SmallButton
          onClick={goToDayView}
          label="Day"/>
        <SmallButton
          onClick={goToAgendaView}
          label="All Events"/>
      </Stack>
    </Stack>
  );
};

When building custom components for Big Calendar it is helpful to look at the source code of the actual components, or of components used in the documentation. Looking at the source of the custom toolbar in the components prop, you'll see that the toolbar is passed the internal onNavigate method, and uses the exported {navigate} constants to help you navigate to the proper views.

The internal onNavigate method is not well documented (yet), but is very easy to work with.

const today = () => onNavigate(navigate.TODAY);
const next = () => onNavigate(navigate.NEXT);
const previous = () => onNavigate(navigate.PREVIOUS);
// must be JS Date, and only if controlling `date` prop
const toThisDay = (newDate) => onNavigate(navigate.DATE, newDate); 

If you happen to be controlling view and date in the same method, then setting both simultaneously can be a challenge due to the internal logic of onView and state rerendering, and may require you to wait a tic between setting each variable.

const toThisDay = (newDate) => {
  onView('day');
  window.setTimeout(() => {
    onNavigate(navigate.DATE, newDate);
  }, 100);
};