我用firebase创建了一个注册表单和一个odne认证。我工作正常。但是当我输入我已经用于注册的电子邮件地址时，默认的firebase错误弹出，说什么“电子邮件已经在使用中”。但是除了这个错误，当我更改电子邮件并点击提交时，什么也没发生。2表单没有再次提交。3当我刷新页面并再次输入所有值（唯一的电子邮件地址）时，表单就提交了。
我必须使它的工作一样，当有人输入已经存在的电子邮件地址，然后应该弹出一个错误，但当有人更改电子邮件，然后应提交的形式。

这是我的注册组件代码

'

import { Link, useNavigate } from "react-router-dom";
import styled from "styled-components";
import { useState} from "react";
import { auth } from "../firebase";
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import Alert from "./Alert";

function SignUp() {
  const [email, setEmail] = useState("");
  const [Password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [submitBtnDisabled, setSubmitBtnDisabled] = useState(false);
  const [userName, setUserName] = useState("");
  const [errorMessage, setErrorMessage] = useState(
    {
      show: false,
      msg: "",
    }
  );
  const navigate = useNavigate();

  const showError = (show = false, msg = "") => {
    setErrorMessage({ show, msg });
  };


  const submitHandler = (event) => {
    event.preventDefault();
    if (!userName || !Password || !email || !confirmPassword) {
      // setErrorMessage("Fill all fields");
      showError(true, "Fill all the fields")
      return;
    }
    if (Password !== confirmPassword) {
      // setErrorMessage("Password and Confirm password not matches");
      showError(true,"Password field not matches" )
      return;
    }
    setErrorMessage("");
    setSubmitBtnDisabled(true);
    createUserWithEmailAndPassword(auth, email, Password)
      .then(async (userDetails) => {
        setSubmitBtnDisabled(false);
        const user = userDetails.user;
        await updateProfile(user, {
          displayName: userName,
        });
        navigate("/home");
      })
      .catch((error) => {
        // setErrorMessage(error.message);
        if (error.code === "auth/email-already-in-use") {
          showError(true, "The email address is already in use");
      } else if (error.code === "auth/invalid-email") {
          showError(true, "The email address is not valid.");
      } else if (error.code === "auth/operation-not-allowed") {
          showError(true, "Operation not allowed.");
      } else if (error.code === "auth/weak-password") {
          showError(true, "The password is too weak.");
      }else{
        showError(true, error.message)
      }

      return;
        
      });
  };

  

  return (
    <Container>
      <Logo>
        <p>Cod3rs</p>
      </Logo>
      <Form>
      {errorMessage.show && <Alert {...errorMessage} removeError={showError} />}

        <input
          type="text"
          placeholder="User Name"
          value={userName}
          onChange={(event) => setUserName(event.target.value)}
        />
        <input
          type="email"
          placeholder="Email" 
          value={email}
          onChange={(event) => setEmail(event.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={Password}
          onChange={(event) => setPassword(event.target.value)}
        />
        <input
          type="password"
          placeholder=" Confirm Password"
          value={confirmPassword}
          onChange={(event) => setConfirmPassword(event.target.value)}
        />
        <button
          className="signUp-btn"
          disabled={submitBtnDisabled}
          onClick={submitHandler}
        >
          Sign Up
        </button>
      </Form>
      <AlreadyLine>
        Already have an account? <Link to="/">Login</Link>
      </AlreadyLine>

      <SignUpLine>
        <p> Or sign up with</p>
      </SignUpLine>
      <ButtonConatiner>
        <button className="google-signup-btn">
          <img src="/images/google-logo.png" alt="" /> Sign Up with Google
        </button>
        <button className="github-signup-btn">
          <img src="/images/github-logo.png" alt="" /> Sign Up with Github
        </button>
      </ButtonConatiner>
    </Container>
  );
}


export default SignUp;

'

这是我的警报组件

'

import React from "react";
import { useEffect } from "react";
import styled from "styled-components";

function Alert({ msg, removeError }) {
  useEffect(() => {
    const timeout = setTimeout(() => {
      removeError();
    }, 3000);
    return () => clearTimeout(timeout);
  }, [removeError]);
  return  <MSG>{msg}</MSG>;

//   
}

'