React + Ant design login form e.preventDefault is not a function

I have been trying to implement a login page functionality in react using Ant Desing forms.

I keep getting the following error

I tried checking all the semicolons to see if this is due to a missing semicolon but was unable to find the root cause.

TypeError: e.preventDefault is not a function
at onSubmit (LoginForm.js:27) 
at onFinish (LoginForm.js:44)
at onFinish (Form.js:73)
at useForm.js:811 

Here is my code for the login page.

import React, {useState} from 'react';
import {Link, Redirect} from 'react-router-dom';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import styles from './NormalLoginForm.css';
import { Form, Input, Button, Checkbox, Layout, Card } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {login} from '../auth/actions/auth';

const NormalLoginForm = ({ login, isAuthenticated }) => {

    const [formData, setFormData] = useState({
        username: '',
        password:''
    });
    const { username, password} = formData;

    const onChange = e => setFormData({...formData, [e.target.name]: e.target.value});

    const onFinish = (values) => {

        console.log('Received values of form  onFinish: ', values);
        // login(username,password)
    };

    const onSubmit = e => {
        e.preventDefault();

        console.log('Received values of form(onSumbit):' );

        login(username,password);
    };

    if (isAuthenticated)
        return <Redirect to='/' />;

    return (
        <Form
            name="normal_login"
            className="login-form"
            initialValues={{
                remember: true,
            }}
            onFinish={e=> onSubmit(e)}

            style={{ maxWidth: 300, align: 'center'}}
        >
            <Form.Item
                name="username"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Username!',
                    },
                ]}
            >
                <Input prefix={<UserOutlined className="site-form-item-icon" />}
                       placeholder="Username"
                        onChange={e=> onChange(e)}
                />
            </Form.Item>
            <Form.Item
                name="password"
                rules={[
                    {
                        required: true,
                        message: 'Please input your Password!',
                    },
                ]}
            >
                <Input
                    prefix={<LockOutlined className="site-form-item-icon" />}
                    type="password"
                    placeholder="Password"
                    onChange={e => onChange(e)}
                />
            </Form.Item>
            <Form.Item>
                <Form.Item name="remember" valuePropName="checked" noStyle>
                    <Checkbox>Remember me</Checkbox>
                </Form.Item>

                <a className="login-form-forgot" href="">
                    Forgot password
                </a>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit" className="login-form-button">
                    Log in
                </Button>
                {/*Or <a href="">register now!</a>*/}
            </Form.Item>
        </Form>
    );
};

NormalLoginForm.propTypes = {
    login: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool
};

const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
});

connect(mapStateToProps, { login })(NormalLoginForm);


function LoginForm () {
    return (
        <NormalLoginForm/>
    )
}

export default LoginForm; 

Where am I making the mistake? this is my first project in React, been stuck here for weeks. Kindly help.