MUI和NextJS不支持的Netlify表单

我刚刚开始使用NextJS，我创建了一个组件，这是一个用MUI制作的简单的联系表单。我正在调用索引页中的组件，但netlify没有检测到表单。下面是组件代码：

import { TextField, Button } from '@mui/material'

const ContactForm = () => {

    return (
        <form
            name="contact-form"
            id="contact-form"
            method="post"
            data-netlify="true"
        >
            <input type="hidden" name="contact-form" value="contact" />
            <TextField
                label="Name"
                name="name"
                data-name="name"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Email"
                name="email"
                data-name="email"
                required
                fullWidth
                type="email"
                margin="normal"
            />
            <TextField
                label="Phone"
                name="phone"
                data-name="phone"
                required
                fullWidth
                type="tel"
                margin="normal"
            />
            <TextField
                label="Message"
                name="message"
                data-name="message"
                multiline
                rows={4}
                fullWidth
                margin="normal"
            />
            <Button type="submit" variant="contained" color="primary" value="enviar">
                Submit
            </Button>
        </form>
    )
}

export default ContactForm

正如你所见，这个表格没有什么特别之处。
我看了Netlify的文档，说对于一些React项目，需要一个隐藏表单来让系统检测所有其他表单。我这样做了，它正在被Netlify成功地检测到，但另一种形式只是没有被检测到，因此，不工作。
我看了一个类似的问题：Netlify form doesn't work with a Material-UI modal
但是，这里的情况有点不同，因为我没有条件地显示表单，它应该在运行时生成
谢谢你的帮助
下面是组件代码：

import { TextField, Button } from '@mui/material'

const ContactForm = () => {

    return (
        <form
            name="contact-form"
            id="contact-form"
            method="post"
            data-netlify="true"
        >
            <input type="hidden" name="contact-form" value="contact" />
            <TextField
                label="Name"
                name="name"
                data-name="name"
                required
                fullWidth
                margin="normal"
            />
            <TextField
                label="Email"
                name="email"
                data-name="email"
                required
                fullWidth
                type="email"
                margin="normal"
            />
            <TextField
                label="Phone"
                name="phone"
                data-name="phone"
                required
                fullWidth
                type="tel"
                margin="normal"
            />
            <TextField
                label="Message"
                name="message"
                data-name="message"
                multiline
                rows={4}
                fullWidth
                margin="normal"
            />
            <Button type="submit" variant="contained" color="primary" value="enviar">
                Submit
            </Button>
        </form>
    )
}

export default ContactForm

正如你所见，这个表格没有什么特别之处。
我看了Netlify的文档，说对于一些React项目，需要一个隐藏表单来让系统检测所有其他表单。我这样做了，它正在被Netlify成功地检测到，但另一种形式只是没有被检测到，因此，不工作。
我看了一个类似的问题：Netlify form doesn't work with a Material-UI modal
但是，这里的情况有点不同，因为我没有条件地显示表单，它应该在运行时生成
谢谢你的帮助