React渲染SVG会覆盖页面上的其他SVG

使用babel-plugin-inline-react-svg从我内next.js的应用程序，我进口一些SVGs到我的阵营v16.0.0组成部分，像这样。

import React from 'react';
import Close from './close.svg';
import Chevron from './right.svg';
import EmptyCart from './empty.svg';

const Component = props => (
  <div>
    <Close />
    <EmptyCart />
    <Chevron />
  </div>
);

当我运行该代码时，页面将以3个SVG都相同的方式呈现，如下所示：

我首先渲染的SVG似乎都接管了所有其他SVG。如果我<EmptyCart />放在第一位，它们全都是购物车图标。但是，这才是真正的关键：当我检查DOM时，SVG似乎都是正确的（它们彼此完全不同）。

有人看过吗？DOM怎么可能说一件事，而浏览器却渲染另一件事？