React Big Calendar – Custom week view content not showing after upgrading the library

I have just upgraded my React Big Calendar library because I upgraded my Node version and my React Version. So I upgraded from “0.29.0” to “1.8.5”, which I know is a very big jump.

I created a custom weekly view, because I had some functionalities that I wanted to implement, which is to choose the number of days shown in a week. So I implemented it as such:

import PropTypes from "prop-types";
import React, { useEffect, useMemo, useState } from "react";
import Week from "react-big-calendar/lib/Week";
import TimeGrid from "react-big-calendar/lib/TimeGrid";
import { useSelector } from "react-redux";
import dayjs from "dayjs";

function workWeekRange(date, options, daysArray) {
  return Week.range(date, options).filter((d) =>
    (daysArray ?? [0, 1, 2, 3, 4, 5, 6]).includes(d.getDay()),
  );
}

const CustomWeekView = (extraProps) => {
  const [viewConfig, selectedView] = useSelector((state) => [
    state.calendarReducer.viewConfig,
    state.calendarReducer.selectedView,
  ]);
  const { isShowWeekend, numOfDays } = viewConfig;

  const [rerender, setRerender] = useState(false);

  const daysArray = useMemo(() => {
    const today = new Date().getDay();
    const days = [0, 6];

    let startingPoint = today;
    while (startingPoint + numOfDays > 6) {
      startingPoint -= 1;
    }
    for (let i = 0; i < numOfDays; i++) {
      days.splice(i + 1, 0, startingPoint + i);
    }

    return isShowWeekend ? days : days.filter((day) => day !== 0 && day !== 6);
  }, [isShowWeekend, numOfDays]);

  const timeIndicator = document.getElementsByClassName(
    "rbc-current-time-indicator",
  )[0];

  useEffect(() => {
    const updateTimeIndicator = () => {
      if (timeIndicator) {
        const nDayOfWeek = dayjs().day();
        let left;
        let width;

        const index = daysArray.indexOf(nDayOfWeek);
        const targetNum = daysArray.slice(0, index).length;
        left = targetNum * -100;
        width = daysArray.length * 100;

        timeIndicator.style.setProperty("--width", `${width}%`);
        timeIndicator.style.setProperty("--left", `${left}%`);
      }
    };

    updateTimeIndicator();
    setRerender(!rerender);
  }, [selectedView, timeIndicator, daysArray]);

  let { date, ...props } = extraProps;
  let range = workWeekRange(date, props, daysArray);

  return <TimeGrid {...props} range={range} />;
};

CustomWeekView.propTypes = {
  date: PropTypes.instanceOf(Date).isRequired,
};
CustomWeekView.defaultProps = TimeGrid.defaultProps;
CustomWeekView.range = workWeekRange;
CustomWeekView.navigate = Week.navigate;
CustomWeekView.title = (date, { localizer }) => {
  let [start, ...rest] = workWeekRange(date, { localizer });
  return localizer.format({ start, end: rest.pop() }, "dayRangeHeaderFormat");
};
export default CustomWeekView;

This worked fine until I upgraded to “1.8.5”, where the header is showing just fine, but the content and the gutter column are not showing, I could see my events on it, but the background and everything just disappeared. If I tried turning it back to the original week view, then it works fine, but it works without my intended functionality. Is there a change I’m not aware of regarding <TimeGrid /> component maybe or what did I miss?

Here’s a screenshot:
Screenshot