reactjs - 为什么这个 React SVG 在页面重新加载时消失了？

Question

我使用 Gatsby.js V4 创建了一个网站，dailycode 页面有一个我使用库react-calendar- heatmap 创建的日历。在初始页面加载时，日历以预期的方式呈现正方形，但在刷新页面时，正方形消失。只有当使用其Link组件单击与通过 Gatsby 网站导航相关的按钮时，方格才会再次正确呈现。

刷新前

刷新后

点击简易按钮后

gatsby develop在本地使用或使用gatsby build和本地时，我无法重现此效果gatsby serve。它只发生在生产中。

我不确定这是 Gatsby.js 错误还是与我正在使用的库相关的错误。

我正在寻找有关如何调试它的任何指导。

代码

这是与日历关联的组件

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>
  );
}