React.js将元素追加到现有的svg

Question

我正在尝试使用chart-parts库构建图表。由于库不提供Grid，因此我尝试使用SVG构建自己的网格并将其注入到现有组件中：

<Chart id="chart" width={650} height={400} data={data}>
  <LinearScale name="y" domain={[0, 2000]} range="height" zero />
  <BandScale name="x" domain="data.title" range="width" padding={0.5} />
  <Grid/>
  <Axis
    orient="left"
    scale="y"
  />
</Chart>

其中Grid是我的自定义svg：

const Grid = () => (
 <>
    <defs>
      <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <path d="M 10 0 S 0 0 0 0" fill="none" stroke="gray" strokeWidth="1"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)"/>
  </>
);

问题是Chart内的所有组件都呈现为SVG，但是我的自定义响应是尝试呈现为html：

此浏览器无法识别该标签。如果要渲染React组件，请以大写字母开头。

有没有办法告诉我将网格附加到现有svg的方法？将网格包装到单独的svg中不起作用，因为我只需要1个svg元素。