Reactjs – My handleLogin functon is not getting triggered after I press the login button?

const [showRegister, setShowRegister] = useState(false);
const {
  register,
  handleSubmit,
  formState: { errors },
  reset,
} = useForm<FormSchemaType>({
  resolver: zodResolver(formSchema),
});

const handleFormSubmit: SubmitHandler<FormSchemaType> = (data) => {
  console.log("hello world");
  if (showRegister === true) {
    handleRegister(data);
    console.log("registering data");
  } else {
    handleLogin(data);
    console.log("logging in ");
  }
};

const handleRegister: SubmitHandler<FormSchemaType> = async (data) => {
  console.log(data);
  const credentials = {
    username: data.username,
    password: data.password,
    confirmPassword: data.confirmPassword,
    email: data.email,
  };

  try {
    const response = await add(credentials);
    console.log(response);
    reset();
  } catch (error) {
    console.log(error);
  }
};

const handleLogin: SubmitHandler<FormSchemaType> = async (data) => {
  console.log(data);
  console.log("helloworld");
  const credentials = {
    username: data.username,
    password: data.password,
  };
  try {
    const response = await login(credentials);
    console.log(response);
    console.log(isSuccess);
    navigate("/user");
    reset();
  } catch (error) {
    console.log(error);
  }
};

return (
  <form onSubmit={handleSubmit(handleFormSubmit)}>
    {/* input fields and other stuff */}
    {showRegister ? (
      <button type="submit" onClick={handleRegister}>
        Register
      </button>
    ) : (
      <button type="submit" onClick={handleLogin}>
        Login
      </button>
    )}
    {showRegister ? (
      <div>
        Already Have An Account?
        <p
          style={{ cursor: "pointer", fontWeight: "bolder" }}
          onClick={() => setShowRegister(false)}
        >
          Login
        </p>
      </div>
    ) : (
      <div>
        Dont Have an account?
        <p
          style={{ cursor: "pointer", fontWeight: "bolder" }}
          onClick={() => setShowRegister(true)}
        >
          Sign Up
        </p>
      </div>
    )}
  </form>
);

NO matter what changed I make, the handleLogin is not getting triggered…..ists not about API call, even the debugger statement like console.log is not getting run. Can someone help me with this?? please The handleRegister functions gets called whn the button is Register but nothing happens when Login is clicked how do i fix this?