Reactjs NextJs Form不允许我输入任何输入，

我正在开发一个简单的形式发送消息到我的邮箱与EmailJS的帮助.EmailJS个设置看起来很好，我通过网站测试了它们，我得到了200个响应.

这是我的代码:

"use client";

import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Textarea } from "./ui/textarea";
import { User, MailIcon, ArrowRightIcon, MessageSquare } from "lucide-react";
import emailjs from "@emailjs/browser";
import { ChangeEvent, FormEvent, useRef, useState } from "react";

const Form = () => {
  const formRef = useRef<HTMLFormElement>(null);
  const [form, setForm] = useState({
    name: "",
    email: "",
    message: "",
  });

  const handleChange = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = e.target;

    setForm({ ...form, [name]: value });
  };

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    console.log("Dati del form:", form); // Verifica i dati del form nel log

    emailjs
      .send(
        "service_+++++",
        "template_++++++",
        {
          from_name: form.name,
          to_name: "Jhon Doe",
          from_email: form.email,
          to_email: "jhondoe1@gmail.com",
          message: form.message,
        },
        "WYI3ob++++++++"
      )
      .then(
        () => {
          alert("Thank you for your message!");

          setForm({
            name: "",
            email: "",
            message: "",
          });
        },
        (error: Error) => {
          console.log(error);
          alert("Something went wrong");
        }
      );
  };

  return (
    <form
      ref={formRef}
      onSubmit={handleSubmit}
      className="flex flex-col gap-y-4"
    >
      <div className="relative flex items-center">
        <Input
          onChange={handleChange}
          type="text"
          id="name"
          placeholder="Name"
          required
          value={form.name}
        />
        <User className="absolute right-6" size={20} />
      </div>
      <div className="relative flex items-center">
        <Input
          onChange={handleChange}
          type="email"
          id="email"
          placeholder="Email"
          required
          value={form.email}
        />
        <MailIcon className="absolute right-6" size={20} />
      </div>
      <div className="relative flex items-center">
        <Textarea
          onChange={handleChange}
          required
          placeholder="Type your message"
          value={form.message}
        />
        <MessageSquare className="absolute top-4 right-6" size={20} />
      </div>

      <Button className="flex items-center gap-x-1 max-w-[166px] rounded-[80px]">
        Let&apos; s Talk
        <ArrowRightIcon size={20} />
      </Button>
    </form>
  );
};

export default Form;

现在我无法在input个字符串中输入任何东西，甚至无法复制，就像它们被困在空字符串的初始状态.

我也使用了shadcn，事实上，Input和TextArea的成分来自那里.有谁知道我为什么会面临这个问题？

我也试着使用普通的input和text area，但我仍然不能输入任何输入.

我也试着使用defaultValues，在这种情况下，我可以输入输入，但带有name、email和message的对象仍然是空字符串.