我尝试在我的React应用程序（React v18）中使用Nivo的响应条（官方文档here）制作一个非常简单的条形图。
我已经设法建立了一个基本的条形图，但它的行为滑稽。
当我加载页面时，它是空。请参见屏幕截图x1c 0d1x
如果我导航到应用程序的另一个页面，然后导航回条形图所在的页面，它会突然显示条形图，但它们非常细，而且绝对没有对齐（它们没有与x轴上的标签垂直对齐）。

最后，如果我在有条形图的页面上（不管它是显示为空还是显示为细条），我进入代码并对条形图组件或导入并呈现条形图的组件进行任何更改（甚至在某个位置添加空格），条形图将重新加载并正确显示。请参见图片：

这是我写的条码

// install (please make sure versions match peerDependencies)
// yarn add @nivo/core @nivo/bar
import { ResponsiveBar } from '@nivo/bar'

const data = [
    {
      day: "Monday",
      degress: 59
    },
    {
      day: "Tuesday", 
      degress: 61
    },
    {
      day: "Wednesday",
      degress: 55
    },
    {
      day: "Thursday",
      degress: 78
    },
    {
      day: "Friday",
      degress: 71
    },
    {
      day: "Saturday",
      degress: 56
    },
    {
      day: "Sunday",
      degress: 67
    }
  ];

// make sure parent container have a defined height when using
// responsive component, otherwise height will be 0 and
// no chart will be rendered.
// website examples showcase many properties,
// you'll often use just a few of them.
const FPPTBarChart = () => {
    return (
      <ResponsiveBar 
        data={data}
        keys={["degress"]}
        indexBy="day"
        margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
        padding={0.4}
        valueScale={{ type: "linear" }}
        colors="#3182CE"
        animate={true}
        enableLabel={false}
        axisTop={null}
        axisRight={null}
        axisLeft={{
          tickSize: 5,
          tickPadding: 5,
          tickRotation: 0,
          legend: "degrees",
          legendPosition: "middle",
          legendOffset: -40
        }}
      />
    );
};

export default FPPTBarChart;

是什么导致了这种奇怪的行为？有没有办法修复它？我倾向于认为这是库的问题，而不是我的代码的问题（这是因为我已经在很多方面调整了我的代码，并尝试了官方文档中的片段以及各种Codesandbox片段）我知道Nivo还不能完全兼容React 18，所以我不得不使用X1 M0 N1 X安装Nivo组件，（推荐here）。这会是问题的根源吗？我的应用程序中已经有Nivo的ResponsiveLine和Nivo的ResponsivePie，它们看起来都运行得很好。另外，我对此做了大量研究，除了this堆栈溢出帖子外，什么都找不到，尽管事实上Nivo是一个非常广泛的库。如果这是库本身的问题/它与React 18的兼容性，那么我肯定应该有很多人在我的同一条船上？我很困惑。
这是一个非常烦人的问题，我想知道我是否会更好地放弃Nivo作为一个库，并过渡到一个替代品，如react-chart-js-2，但我想确保它不是可以修复的东西，然后再进行这个相当大的过渡。
你有什么想法？