I have Just created a new SignUp page but this is not working

I have Just created a new Sign Up page but this is not working. I made an error alert to check whether password is same or not but it is not showing that alert my code is given below Please help me to solve this......

export function SignupForm(props) {
  const { switchToSignin } = useContext(AccountContext);
  const emailRef = useRef();
  const passwordRef = useRef();
  const passwordConfirmRef = useRef();
  const { SignUp } = useAuth();
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();

    if (passwordRef.current.value !== passwordConfirmRef.current.value) {
      return setError("Password does not match");
    }

    try {
      setError("");
      setLoading(true);
      await SignUp(emailRef.current.value, passwordRef.current.value);
    } catch {
      setError("Failed to create an account ");
    }
    setLoading(false);
  }

  return (
    <BoxContainer>
      {error && (
        <div class="alert" variant="danger">
          {error}{" "}
        </div>
      )}
      <FormContainer onSubmit={handleSubmit}>
        <Input type="email" id="email" placeholder="Email" required ref={emailRef} />
        <Input type="password" id="password" placeholder="Password" required ref={passwordRef} />
        <Input type="password" id="confirm-password" placeholder="Confirm Password" ref={passwordConfirmRef} />
      </FormContainer>
      <Marginer direction="vertical" margin={10} />
      <SubmitButton disabled={loading} type="submit">
        Signup
      </SubmitButton>
      <Marginer direction="vertical" margin="1em" />
      <MutedLink href="#">
        Already have an account?
        <BoldLink href="#" onClick={switchToSignin}>
          Signin
        </BoldLink>
      </MutedLink>
    </BoxContainer>
  );
}