'toast.success' is not working in my signup form [closed]

import axios from "axios";
import { useState } from "react";
import { toast, ToastContainer } from "react-toastify";
// import "../signup/signup.css";
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;