How can I use an object property that is stored in the redux store for an if() statement inside a react component?

Question

I have defined a SingIn component that gets customer information and stores them as objects in the redux store, so I should be able to reach customer's properties from other components like UserLogin.

in the UserLogin component, I create a new array from new customers and VIP customers but when I try to use their properties inside an if ()statement for handleSubmit* this doesn't work! (just VIP work)

this is very weird because I can see the customerList in the console () and alert (), also I can get the VIP values but not for those customers who had signed. what is the problem !?

If this one doesn't work what is your solution offer for login?

import React, { useState } from "react";
//import { Customers } from "./customers";
import {
  insertUsername,
  insertPassword,
  insertEmail,
  addCustomer,
} from "../redux/actions";
import { connect } from "react-redux";

function SingIn(props) {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [email, setEmail] = useState("");
  const [balance, setBalance] = useState(0);
  const customer = {
    username: ` ${username}`,
    password: ` ${password}`,
    balance: `${balance}`,
    email: `${email}`,
  };

  function handleChange(e) {
    if (e.target.type === "email") {
      setEmail(e.target.value);
    } else if (e.target.type === "password") {
      setPassword(e.target.value);
    } else {
      setUsername(e.target.value);
    }
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (username && password && email !== "") {
      props.insertUsername(username);
      props.insertPassword(password);
      props.insertEmail(email);
      props.addCustomer(customer);

      alert(
        `Hi ${customer.username} welcome to your bank, please login for start!   `
      );
      console.log(customer);

      setUsername("");
      setEmail("");
      setPassword("");
    } else {
      alert("Please enter your information before submite!");
    }
    //e.preventDefault();
  }

  return (
    <div className="singin" id="singin">
      <form onSubmit={handleSubmit}>
        <h2> Sing in and create a new account</h2>
        <label>Please enter your information</label>
        <br />
        <input
          name="username"
          type="text"
          placeholder="username"
          value={username}
          onChange={handleChange}
        />
        <br />
        <input
          name="password"
          type="password"
          placeholder="password"
          value={password}
          onChange={handleChange}
        />
        <br />
        <input
          name="email"
          type="email"
          placeholder="Email"
          value={email}
          onChange={handleChange}
        />
        <br />
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

And this is the login component attention to if() in handleSubmit:

import { connect } from "react-redux";
import { doLogin } from "../redux/actions";
import { Customers } from "./customers";

function UserLoggin(props) {
  const [loginer, setLoginer] = useState("");
  const [pswd, setPswd] = useState("");
  const customerArr = props.c;
  //const lastCustomer = customerArr[customerArr.length - 1];
  const vip = [
    { username: "alex", password: "alex", balance: 200, email: "mama" },
    { username: "tom", password: "cat", balance: 1000, email: "lablab" },
    { username: "jerry", password: "mous", balance: 200, email: "papa" },
  ];
  const customerList = vip.concat(customerArr);

  function handleChange(e) {
    if (e.target.type === "search") {
      setLoginer(e.target.value);
    } else {
      setPswd(e.target.value);
    }
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (loginer && pswd !== "") {
      for (let i = 0; i < customerList.length; i++) {
        if (
          loginer === customerList[i].username &&
          pswd === customerList[i].password
        ) {
          // props.doLogin(customerArr[i]);
          console.log(customerList);
          alert(
            `usename: ${customerList[i].username} balance:${customerList[i].balance}`
          );
          //////////////////////////////////////////////////////////////////
          //  remove the login component after submit:
          //document.getElementById("login").style.display = "none";

          //////////////////////
          //this is just for test:

          // if (loginer === `${customerList[4].username}` && pswd === "11") {
          //props.doLogin(loginer);
          //  alert(`${customerList[4].username}`);
          // console.log(customerList);
          //////////////////////
        } else {
          //alert("nohting");
          setPswd("");
          setLoginer("");
        }
      }
    } else {
      alert("Enter username and password.");
    }
  }

  return (
    <div className="login" id="login">
      <form onSubmit={handleSubmit}>
        <header>
          <h1>The vulnerable Bank</h1>
        </header>
        <label>Please login for start as a customer</label> <br />
        <input
          name="loginer"
          type="search"
          value={loginer}
          onChange={handleChange}
          placeholder="username"
        />
        <br />
        <input
          name="pswd"
          type="password"
          value={pswd}
          onChange={handleChange}
          placeholder="password "
        />
        <br />
        <button type="submit">login</button>
      </form>
    </div>
  );
}

const mapStatetoprops = (state) => {
  return {
    u: state.username,
    p: state.password,
    e: state.email,
    c: state.customer,
  };
};

export default connect(mapStatetoprops, { doLogin })(UserLoggin);

and reducer:

import {
  DO_LOGIN,
  INSERT_PASSWORD,
  INSERT_USERNAME,
  ADD_CUSTOMER,
  ADD_MESSAGE,
} from "./actiontypes";

const initialState = {
  loginer: [" "],
  sender: [""],
  username: [""],
  password: [""],
  email: [""],
  customer: [{ username: "test", password: "test", balance: 0, email: "test" }],

  message: [""],
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "DO_LOGIN":
      return { ...state, loginer: [...state.loginer, action.loginer] };
    case "INSERT_USERNAME":
      return { ...state, username: [...state.username, action.username] };
    case "INSERT_PASSWORD":
      return { ...state, password: [...state.password, action.password] };
    case "INSERT_EMAIL":
      return { ...state, email: [...state.email, action.email] };
    case "ADD_MESSAGE":
      return { ...state, message: [...state.message, action.message] };
    case "ADD_CUSTOMER":
      return { ...state, customer: [...state.customer, action.customer] };

    default:
      return state;
  }
}

export default reducer;