Next.js + react-hot-toast 2.4.1 单条Toast提示无法触发的问题求助

大家好，我碰到了一个特别奇怪的问题：在我的Next.js项目中使用react-hot-toast 2.4.1时，单条toast.success("Message 1")不会正常显示出来——除非后面紧跟着再调用一次toast.success("Message 2")，或者我快速连续点击两次表单的提交按钮，第一条提示才会触发。

如果在同一个提交函数里放两条Toast，第一条能正常显示，但第二条还是得靠快速点两次提交才能出来。我已经对着ChatGPT折腾了2-3小时，试了它给的所有方案都没用，实在没办法才来求助大家。

下面是我的相关代码片段：

"use client";
import React from "react";
import { useForm, SubmitHandler } from "react-hook-form"
import { Inputs } from "@/types/contactinputs";
import toast from "react-hot-toast";

const Contact = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isSubmitted, isSubmitSuccessful, isSubmitting },
    reset,
  } = useForm<Inputs>({
    defaultValues: {
      fullName: "",
      email: "",
    }
  })

  const onSubmitfunc: SubmitHandler<Inputs> = async (data) => {
    console.log(data);
    toast.success("Message 1");
    // toast.success("Message 2");
  };

  // console.log(watch("fullName")) // watch input value by passing the name of it

  return (
    <>
      <h1 className="text-xl"> Send a message </h1>
      <div >
        {errors.fullName && < div> *Please enter a valid Full Name</ div>}
        {errors.email && < div>*Please enter a valid Email</ div>}
      </div>
      <form method="POST" onSubmit={handleSubmit(onSubmitfunc)} className="flex" >
        <div >
          <input {...register("fullName", { required: true, minLength: 3, maxLength: 70 })} type="text" placeholder="Full name" />
          <input {...register("email", { required: true, minLength: 5, maxLength: 70, pattern: /^[^@]+@[^@]+\.[^@]+$/ })} type="email" placeholder="Email address" />
        </div>
        <div>
          <button type="submit" disabled={isSubmitting} className="bg-black" >
            Send Message
          </button>
        </div>
      </form>
    </>
  );
};

export default Contact;

补充说明：console.log(data);每次提交都能正常工作，控制台里会正确打印出表单数据，哪怕它和Toast写在同一个代码块里。

内容来源于stack exchange