Using React Javascript (Form-Onsubmit & calling API not working properly)

i am a bit puzzled with the logic when reading the below code, although the code is working but not exactly as i would like it to behave.

3 queries i have if some one can please clarify.

1- As i understand useEffect is used to invoke the function after render, but in the below code, once the form is sumbitted (onSubmit={credentialVerify}) it will call the credentialVerify() function as below, so i dont think we need useEffect here, but still the code doesnt call the API unless i use the useEffect statement.

2- Also doesnt wait for me to enter my credentails first and as soon as i go to the Signin page it will fetch the API’s (when using useEffect ) and shows the result in the windows, but i try to design in a way that when i click button then it will fetch the API

3- when in the form onsubmit call the credentialVerify function, i have console.log(e) but it is showing as undefined, but as i understand onsubmit will call the function and through the event argument by default.

Below is the snippet of my code.

Any help Appreciated.

import React, { useState, useEffect } from "react";
import "../App.css";
import { Link } from "react-router-dom";

function Signin() {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const updateName = (e) => {
    setName(e.target.value);
  };
  const updatePassword = (e) => {
    setPassword(e.target.value);
  };
  const [items, setItems] = useState([]);
  useEffect(() => {              //Point-1  useEffect- API not call atall without this statement
    credentialVerify();
  }, []);
  const credentialVerify = async (e) => {
    console.log(e);                                         //Point-3 this is coming as undefined
    const data1 = await fetch("http://localhost:5000/api/customers");
    const incomingdata = await data1.json();
    console.log(data1);
    console.log(incomingdata);
    console.log(name, password);
    setItems(incomingdata);
  };
  return (
    <div>
      <div>
        {
          <form className="formstyle" onSubmit={credentialVerify}>
            <input
              type="text"
              placeholder="Username"
              name="username"
              value={name}
              onChange={updateName}
            />

            <input
              type="text"
              placeholder="Password"
              name="password"
              value={password}
              onChange={updatePassword}
            />
            <button type="submit">Submit</button>
          </form>
        }
      </div>
      <div>

        {items.map((entry) => {
          let key = entry.email;
          let valuefirst = entry.firstName;
          let valuelast = entry.created_at;

          return (
            <p key={key}>
              {key}: {valuefirst}bb {valuelast}
            </p>
          );
        })}
      </div>
    </div>
  );
}
export default Signin;