React注册表单中react-toastify的toast.success无法正常显示的问题求助

我正在实现一个React注册表单，使用react-toastify包来展示提交成功和错误的提示消息。目前toast.error函数能正常工作，但当表单提交成功时，toast.success完全不显示成功提示，这让我很困惑。

我已经确认服务器请求是成功的——控制台能打印出服务器返回的响应数据，表单重置和后续的页面跳转也都正常执行了，但成功提示就是不弹出来。下面是我的Signup组件完整代码，麻烦各位帮忙看看哪里出了问题：

import axios from "axios";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
import { Link, useNavigate } from "react-router-dom";
import "react-toastify/dist/ReactToastify.css";

const Signup = () => {
  const navigate = useNavigate();
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    password: "",
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  const handleSignup = async (e) => {
    e.preventDefault();

    if (!formData.name || !formData.phone || !formData.email || !formData.password) {
      toast.error("Please fill in all fields.", {
        position: "top-right",
        autoClose: 3000,
      });
      return;
    }

    try {
      const res = await axios.post("http://localhost:0000/example", formData);
      console.log("Response from server:", res.data);
      toast.success("Form Submitted Successfully", {
        position: "top-right",
        autoClose: 5000,
      });
      setFormData({
        name: "",
        phone: "",
        email: "",
        password: "",
      });
      setTimeout(() => {
        navigate("/signin");
      }, 5000);
    } catch (error) {
      toast.error("Something went wrong. Please try again.", {
        position: "top-right",
        autoClose: 5000,
      });
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <ToastContainer />
      <div className="bg-white shadow-lg rounded-lg w-full max-w-lg p-8">
        <h2 className="text-lg font-bold text-center mb-6">Create Account</h2>
        <form onSubmit={handleSignup}>
          <div className="mb-4">
            <input
              type="text"
              className="w-full border border-gray-300 rounded-md px-4 py-2"
              name="name"
              placeholder="Enter Full Name"
              value={formData.name}
              onChange={handleChange}
            />
          </div>
          <div className="mb-4">
            <input
              type="text"
              className="w-full border border-gray-300 rounded-md px-4 py-2"
              name="phone"
              placeholder="Enter Phone"
              value={formData.phone}
              onChange={handleChange}
            />
          </div>
          <div className="mb-4">
            <input
              type="email"
              className="w-full border border-gray-300 rounded-md px-4 py-2"
              placeholder="Enter Email"
              name="email"
              value={formData.email}
              onChange={handleChange}
            />
          </div>
          <div className="mb-6">
            <input
              type="password"
              className="w-full border border-gray-300 rounded-md px-4 py-2"
              placeholder="Enter Password"
              name="password"
              value={formData.password}
              onChange={handleChange}
            />
          </div>
          <div>
            <input
              type="submit"
              className="w-full bg-blue-600 text-white rounded-md py-2 cursor-pointer"
              value="Signup"
            />
          </div>
          <div className="text-center mt-4">
            <span>
              Already have an account?
              <Link to="/signin" className="text-blue-600 ps-1">
                Login Here
              </Link>
            </span>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Signup;

我已经排查过的点：

• 服务器请求确实成功，控制台能正常打印res.data
• 表单重置操作和setTimeout后的页面跳转都能正常执行
• toast.success的配置参数（位置、自动关闭时间）和toast.error类似，应该不是配置问题

希望各位能帮我找到问题所在，谢谢！

内容来源于stack exchange