Форма не выполняет функцию отправки

Код в моей функции onSubmit никогда не выполняется и не получает никаких ошибок. Я использую Semantic-UI-React с серверной частью graphql / mongoDB с apollo в качестве клиента. Фреймворк переднего плана - Next.js. Любая помощь относительно того, почему он не входит в функцию отправки, очень ценится!

Весь класс компонента:

class EmployeeForm extends Component {
    state = {
        name: "",
        employeeID: "",
        mnemonic: "",
        errorMessage: "",
        loading: false
    }

    onSubmit = async (event) => {
        event.preventDefault();
        console.info('entering function');

        const newEmployeeWallet = ethers.Wallet.createRandom();
        this.setState({mnemonic: newEmployeeWallet.mnemonic});

        const {employeeID} = this.props;
        const mnemonic = this.state.mnemonic;
        await this.props.createEmployee({
            variables: { 
                employeeID, 
                mnemonic, 
            },
        }); 
        console.info(this.state.mnemonic);
        console.info(newEmployeeWallet.address); 

    };

    render() {
        return(
            <div>
                <h3>Authenticate a new Employee</h3>
                <Form onSubmit = {this.onSubmit} error = {!!this.state.errorMessage}>                    
                    <Form.Field inline>
                        <Input label='Name' placeholder='Name' value = {this.state.name} required = {true} onChange = {event => 
                        this.setState({ name: event.target.value })}/>
                    </Form.Field> 
                    <Form.Field inline>
                        <Input label='Employee ID' placeholder='Employee ID' value = {this.state.employeeID} required = {true} onChange = {event =>
                        this.setState({ employeeID: event.target.value})}/>
                    </Form.Field> 
                    <Message error header='Error!' content = {this.state.errorMessage} />          
                    <Button loading = {this.state.loading} type='submit' primary>Submit</Button>
                </Form>
            </div>
        );
    }
}

const createEmployee = gql`
            mutation createEmployee($employeeID: String!, $name: String!) {
                createEmployee(input: {employeeID: $employeeID, name: $name}) {
                    employeeID
                    name
                }
            }
        `;

export default graphql(createEmployee, { name: 'createEmployee'})(EmployeeForm);