Removed:

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const [password, setPassword] = useState("");

Add:

const { register, handleSubmit, reset, formState: { errors } } = useForm();

With React Hook Form :

import { useState } from "react";
import { useForm } from "react-hook-form";
import { signupUser } from "../../../services/authService";

function Signup() {
  const [successMessage, setSuccessMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = async (data) => {
    setSuccessMessage("");
    setErrorMessage("");

    try {
      const response = await signupUser(data);

      setSuccessMessage(response.message || "Signup successful!");
      reset(); // Clear all form fields
    } catch (error) {
      console.error("Signup Error:", error);
      setErrorMessage(error.message || "Signup failed. Please try again.");
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <h2>User Signup</h2>

        <input
          type="text"
          placeholder="Name"
          {...register("name", {
            required: "Name is required",
          })}
        />
        {errors.name && <p>{errors.name.message}</p>}

        <input
          type="email"
          placeholder="Email"
          {...register("email", {
            required: "Email is required",
            pattern: {
              value: /^\S+@\S+$/i,
              message: "Invalid email address",
            },
          })}
        />
        {errors.email && <p>{errors.email.message}</p>}

        <input
          type="text"
          placeholder="Phone"
          {...register("phone", {
            required: "Phone number is required",
          })}
        />
        {errors.phone && <p>{errors.phone.message}</p>}

        <input
          type="password"
          placeholder="Password"
          {...register("password", {
            required: "Password is required",
            minLength: {
              value: 6,
              message: "Password must be at least 6 characters",
            },
          })}
        />
        {errors.password && <p>{errors.password.message}</p>}

        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? "Signing Up..." : "Sign Up"}
        </button>
      </form>

      {successMessage && (
        <div style={{ color: "green", marginBottom: "10px" }}>
          {successMessage}
        </div>
      )}

      {errorMessage && (
        <div style={{ color: "red", marginBottom: "10px" }}>
          {errorMessage}
        </div>
      )}
    </>
  );
}

export default Signup;

Without React Hook Form:

import { useState } from "react";
import { signupUser }  from "../../../services/authService"; 
 function Signup(){
    const[name, setName] = useState("");
    const[email, setEmail] = useState("");
    const[phone, setPhone] = useState("");
    const[password, setPassword] = useState("");
    const [successMessage, setSuccessMessage] = useState("");
    const [errorMessage, setErrorMessage] = useState("");

    const handleSubmit = async (e) => {
        e.preventDefault();
         setSuccessMessage("");
        setErrorMessage("");
        const userData = { name, email, phone, password };
        try {
            const response = await signupUser(userData);
           setSuccessMessage(response.message || "Signup successful!");
            setName("");
            setEmail("");
            setPhone("");
            setPassword("");
        }
        catch (error) {
            console.error("Signup Error:", error);
              setErrorMessage(error.message || "Signup failed. Please try again.");

    }


    }
    return(
        <>
        <form onSubmit={handleSubmit}>
            <h2>User Signup</h2>
            
            <input type="text" 
            placeholder="Name" 
            value={name}
            onChange = {(e) => setName(e.target.value)}
            />
            <input type="email" 
            placeholder="Email" 
            value={email}
            onChange = {(e) => setEmail(e.target.value)}
            />
            <input type="text" 
            placeholder="Phone" 
            value={phone}
            onChange = {(e) => setPhone(e.target.value)}
            />
            <input type="password" 
            placeholder="Password" 
            value={password}
            onChange = {(e) => setPassword(e.target.value)}
            />
            <button>Sign Up</button>
            </form>
             {/* 5. Conditionally render the messages */}
                {successMessage && (
                    <div style={{ color: "green", marginBottom: "10px" }}>
                        {successMessage}
                    </div>
                )}
                
                {errorMessage && (
                    <div style={{ color: "red", marginBottom: "10px" }}>
                        {errorMessage}
                    </div>
                )}
        </>
    );
}

export default Signup;