Page render correctly on navigation using Link component, breaks on page refresh.

[Bryce-Davidson]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

The content renders on the page correctly on the initial page load, upon refreshing the react-calendar-heatmap does not render correctly, shifting all days over as well as creating a build-up of the month names on the right-hand side.

I am not sure why Gatsby initially renders the content correctly, and what is happening on refresh where it does not. Any help or guidance would be greatly appreciated. I'm also not entirely sure if this is a Gatsby problem or the components problem, I can't seem to figure this out :/. Cheers.

Initial Page Load

After Refreshing the Page

Here is the component code:

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import { navigate } from "gatsby";
import moment from "moment";
import ReactTooltip from "react-tooltip";
import CalendarHeatmap from "react-calendar-heatmap";
import "../../styles/react-cal.css";

const tag_map = {
  easy: 1,
  medium: 2,
  hard: 3,
};

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 = new Date(moment(posts[0].fieldValue).format("YYYY-MM-DD"));
  const end_date = new 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={start_date}
        endDate={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>
  );
}

Reproduction Link

https://www.brycedavidson.dev/dailycode

Steps to Reproduce

1. Visit the link https://www.brycedavidson.dev/dailycode
2. View green square in the calendar
3. Refresh the page
4. View shifted data in the calendar component
5. View built up month names on right hand side
6. Navigate using any on-page buttons such as easy
7. View the page rendering correctly
   ...

Expected Result

The green square/data does not get shifted and there is no build-up of month names on the right-hand side

Actual Result

The green square/data gets shifted and there is a build-up of month names on the right-hand side

Environment

System:
    OS: macOS 11.6.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 7.24.1 - /usr/local/bin/npm
  Languages:
    Python: 3.9.1 - /Users/brycedavidson/opt/miniconda3/bin/python
  Browsers:
    Chrome: 98.0.4758.80
    Safari: 15.2
  npmPackages:
    gatsby: ^4.1.0 => 4.1.4 
    gatsby-plugin-image: ^2.1.0 => 2.1.2 
    gatsby-plugin-mdx: ^3.1.0 => 3.1.3 
    gatsby-plugin-postcss: ^5.1.0 => 5.1.0 
    gatsby-plugin-react-helmet: ^5.4.0 => 5.4.0 
    gatsby-plugin-sharp: ^4.1.0 => 4.1.3 
    gatsby-source-filesystem: ^4.1.0 => 4.1.2 
    gatsby-transformer-sharp: ^4.1.0 => 4.1.0 
  npmGlobalPackages:
    gatsby-cli: 4.4.0
    gatsby: 4.0.0-zz-next.1

Config Flags

N/A

[LekoArts]

You might run into an issue with rehydration: https://www.gatsbyjs.com/docs/conceptual/react-hydration/

You can give https://www.joshwcomeau.com/react/the-perils-of-rehydration/ a read to learn more about it and see if you can figure out if that's your issue. On first glance it seems like that to me.