Why is this React SVG disappearing on page reload?

Question

I created a website using Gatsby.js V4, the dailycode page has a calendar I created using the library react-calendar-heatmap. On initial page load, the calendar renders the square in an expected way, yet upon refreshing the page the square disappears. It is only when clicking on buttons associated with navigation through the Gatsby website using their Link component that the square again renders correctly.

BEFORE REFRESH

AFTER REFRESH

AFTER CLICKING EASY BUTTON

I was not able to reproduce this effect while using gatsby develop locally or by using gatsby build and gatsby serve locally. It is only occurring in production.

I'm not sure if this is a Gatsby.js error or an error associated with the library I'm using.

I'm looking for any guidance on how to debug this.

CODE

Here is the component associated with the calendar

export default function DailyCodeCalendar() {
  const data = useStaticQuery(graphql`
    query {
      allMdx(filter: { frontmatter: { tags: { eq: "dailycode" } } }) {
        group(field: frontmatter___date) {
          fieldValue
          nodes {
            frontmatter {
              title
              prefix
              difficulty
            }
          }
        }
      }
    }
  `);

  const posts = data.allMdx.group;

  const start_date = moment(posts[0].fieldValue).format("YYYY-MM-DD");
  const end_date = moment("2022-12-31").format("YYYY-MM-DD");

  const dates = posts.map((date) => {
    return {
      date: moment(date.fieldValue.split("T")[0]).format("YYYY-MM-DD"),
      max_difficulty: date.nodes.reduce((acc, node) => {
        const difficulty = tag_map[node.frontmatter.difficulty];
        return Math.max(acc, difficulty);
      }, 1),
      posts: date.nodes.map((post) => {
        const { title, prefix } = post.frontmatter;
        return {
          title,
          prefix,
        };
      }),
    };
  });

  return (
    <div className="mb-10">
      <CalendarHeatmap
        startDate={new Date(start_date)}
        endDate={new Date(end_date)}
        values={dates}
        onClick={(day) => {
          let url = "/dailycode";
          if (day) url = url + "/" + day.date;
          navigate(url, {
            state: {
              fromCal: true,
            },
          });
        }}
        classForValue={(day) => {
          if (!day) return "color-empty";
          return `color-leetcode-${day.max_difficulty}`;
        }}
        tooltipDataAttrs={(day) => {
          if (!day.date) return null;
          let tooltip = {
            "data-tip": `<p class="text-sm mb-2">${moment(day.date).format(
              "MMMM D, YYYY"
            )}</p>`,
          };
          day.posts.forEach((post) => {
            tooltip[
              "data-tip"
            ] += `<p class="mb-0 text-sm">${post.prefix} ${post.title}</p>`;
          });
          return tooltip;
        }}
      />
      <ReactTooltip html={true} />
    </div>
  );
}