submit form with react redux

i implement a single form for each sign up/ login with redux i test the apis with postman before trying to submit data with forms so the login form works fine but when i try to submit the register form nothing happened , just i got the console log message in the navigator console .. here is my code : form.js

import React, { useEffect } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import PropTypes from "prop-types";
import { useForm } from "react-hook-form";
import { login } from "../../redux/index";
import loginSvg from "../../images/Login-amico.svg";
import signUpSvg from "../../images/signup.svg";


function Form({ page }) {
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const userLogin = useSelector((state) => state.userLogin);
    const { error: loginError, loading: loginLoading, userInfo } = userLogin;
    const { register, handleSubmit } = useForm();
    const onSubmit = (data) => {
        if (page !== "signUp") {
            dispatch(login(data.email, data.password));
        } else {
            console.log("smthg else");
        }
    };
    useEffect(() => {
        if (userInfo) {
            navigate("/app/dashboard", { replace: true });
        }
    }, [navigate, userInfo]);
    return (
        
        <form onSubmit={handleSubmit(onSubmit)} >
                
      

        {page === "signUp" ? (
        <div className="mb-3">
          <label>User Name</label>
          <input
            type="text"
            className="form-control"
            placeholder="user name"
            {...register("userName", {
                required: true,
                className:
                    "form-control form-control-lg",
                type: "text",
                placeholder: "User Name",
            })}
          />
          
        </div>
        ) : undefined}

      
        <div className="mb-3">
          <label>Email address</label>
          <input
            type="email"
            className="form-control"
            placeholder="Enter email"
            {...register("email", {
                required: true,
                className: "form-control",
                type: "email",
                placeholder: "Email address",
            })}
          />
        </div>
        <div className="mb-3">
          <label>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Enter password"
            {...register("password", {
                required: true,
                className: "form-control",
                type: "password",
                placeholder: "Password",
            })}
          />
        </div>
        <div className="d-grid">
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </div>
        <p className="forgot-password text-right">
          Already registered <a href="/sign-in">sign in?</a>
        </p>
      </form>
        


    );
}

Form.propTypes = {
    page: PropTypes.string.isRequired,
};

export default Form;

how can i solve this issue ?