console.logs in onClick handleSubmit do not print out

There is a login component in React 18.x front end to take input of username and password, and then send them to backend server for verification. If verified, then route to a path defined with react-route-dom. The browser is Chrome. Here is the login component:

export default function ELogin () {
    console.log("from Elogin11");  //<<==show up in Chrome's console 
    const [loginName, setLoginName] = useState('');
    const [password, setPassword] = useState('');
    const authVal = useContext(authContext);

    const handleSubmit = async (event) => { 
        console.log("from Elogin handleSubmit : ", event); //<<==NO show 
        let url = `${GLOBAL.BASE_URL}/logins?password=${encodeURIComponent(password)}&loginName=${encodeURIComponent(loginName)}`
        //let url = `${GLOBAL.BASE_URL}/express_backend`
        let obj = {
            username:loginName,
            password:password
        };
        try {
            let employee = await helper.fetchpost(url, obj); //<<==fetch show up on backend node/express server
            console.log("fire up from react browser", employee); //<<==NO show 
            authVal.setEmpUser(employee.results);             
            //redirect
            return <Navigate to="/employee" />;
        } catch(err) {
            console.log("Error in login", err);
        };
       
    };

    const handleLoginName = (event) => {
        setLoginName(event.target.value);
    };

    const handlePassword = (event) => {
        console.log("handle password : ", event.target);  //<<==show up in Chrome's console 
        setPassword(event.target.value);
    };
    console.log("before return Elogin");  //<<==show up in Chrome's console 
    return (
        <React.Fragment>
            <Row>
            <Col sm={true}></Col>
            <Col sm={true}>
                <Form onSubmit={() => {} }>
                    <h3 className="text-center" >Login Page</h3>

                    <div className="form-group">
                        
                        <input type="text" className="form-control"  placeholder="登录名" onChange={handleLoginName} />
                    </div>

                    <div className="form-group">
                        
                        <input type="password" className="form-control"  placeholder="密码" onChange={handlePassword} />
                    </div>

                    <Button onClick={()=>{console.log("button clicked") //<<==NO show; handleSubmit()}} type="submit" className="btn btn-primary btn-block" >Login</Button>
                
                </Form>
                </Col>
                <Col sm={true}></Col>
            </Row>
        </React.Fragment>
    );
}

However none of the console.log in handleSubmit gets printed in Chrome’s console, and Navigate seems not fired as well.