警告：无效的属性名称：`'data-*'`

Question

我正在尝试使用 babel-plugin-inline-react-svg 在 NEXT.js 中导入 svg 文件。

按照所有说明操作，它工作正常。

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    "inline-react-svg"
  ]
}

// image.tsx

import styled from 'styled-components';
import BackgroundImage from '../public/assets/img.svg';
export const WhyChooseUsSection = () => {
    return <>
                <div className="background">
                    <BackgroundImage/>
                </div>
                <style jsx>{`
                    div {
                        position: relative;
                        width: 100%;
                    }
                `}</style>
            </>
}

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

但它发生警告。

Warning: Invalid attribute name: `'data-name'`

这是因为打字稿吗？我该如何解决？