当我使用默认刻度时，它会显示出来，但当我使用自定义刻度函数时，它就不会显示出来：

<ResponsiveContainer width="100%" height={300}>
    <LineChart
        width={500}
        height={300}
        data={data}
        margin={{
            top: 5,
            right: 30,
            left: 20,
            bottom: 5,
        }}
    >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis
            dataKey="name"
            tick={() => <div>hi</div>}
        />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line dataKey="pv" fill="#8884d8" />
        <Line dataKey="uv" fill="#82ca9d" />
    </LineChart>
</ResponsiveContainer>

如果我删除tick函数，那么标签会显示在x轴上，但是当我想显示一条简单的hi消息作为test时，什么也不会显示：
这是没有自定义勾选功能的图像：

这是带有自定义刻度函数的图像：

我试过设置interval={0}，但没有任何变化。我跟踪了this问题，但没有一个解决方案起作用。
我错过了什么？
关键是那些<div>hi</div>消息被呈现了，我可以在dev工具的SVG标签中看到它们，但是它们没有显示出来，我也改变了样式，但是不能显示出来。