我一直在试图弄清楚为什么这段代码不会运行handleSubmit函数。所以基本上，表单接受一个输入，并在表单提交的handleSubmit函数中运行它。该函数使用email and userId向API路由发出POST请求，但不幸的是，当我将这些值记录到控制台时，我得到一个Form submission canceled because the form is not connected警告而不是数据。你能发现我错过了什么或没有做对吗？下面是代码。

import { Fragment, useState } from 'react';
import { Dialog, Transition } from '@headlessui/react';
import Image from 'next/image';

export default function Team({ show, setShow, userId }) {
    const [email, setEmail] = useState({ userId: userId, email: "" });
    const [emailMessage, setEmailMessage] = useState("...");
    const [emailSent, setEmailSent] = useState(false);

    const handleChange = (e) => {
        e.preventDefault();
        const { name, value } = e.target;
        setEmail({ ...email, [name]: value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await fetch("/api/team-members", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ userId: email.userId, email: email.email })
            });

            const data = await response.json();
            console.log(email.userId, email.email) //This is not logging to the console
            console.log("DATA", data); //This is not logging to the console
        } catch (error) {
            console.error("Error fetching data:", error);
            setEmailMessage("An error occurred while sending the invite.");
        }
    };

    return (
        <>
            <div >
                {emailSent ? (
                    <>
                        <button
                            type="button"
                            onClick={() => setShow(false)}
                        >
                            Close
                        </button>
                    </>
                ) : (
                    <form onSubmit={handleSubmit}>
                        <label htmlFor="email">
                            Member's email
                        </label>
                        <p>Please enter one or more emails separated by commas ','</p>
                        <input
                            id="email"
                            name="email"
                            type="email"
                            onChange={handleChange}
                            autoComplete="email"
                            value={email.email}
                            required
                            placeholder="[email protected]"
                        />
                        <button type="submit" onClick={() => setEmailSent(true)}>
                            Submit
                        </button>
                    </form>
                )}
            </div>
        </>
    )
}

字符串