Why is this react form submitting two times

So I have a form made with reactjs and a restapi on express to which I’m sending post request from the Confirm page. The main question is why this form is submitting two times? And also it is submitting when I’m pressing next from previous page and not when I’m pressing the submit button on the confirm page. I have tried to change in UserForm in case 4 from this "formHandler={this.formHandler(this.state.valuesToSubmit)}" to this "formHandler={this.formHandler}" but like that it isn’t making the request at all. Please help!

import React, { Component } from 'react';
import StepOne from './StepOne';
import SocilaProfiles from './SocialProfiles'
import PersonalDetails from './PersonalDetails';
import Confirm from './Confirm';
import Success from './Success';
import axios from 'axios';

export class UserForm extends Component {
    state = {
        step: 1,
        email: '',
        password: '',
        confirmPassword: '',
        twitter: '',
        facebook: '',
        googlePlus: '',
        firstName: '',
        lastName: '',
        phone: '',
        adress: ''
    }

    // Proceed to next step
    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    }

    // Go back to prev step
    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        });
    }

    // Handle fields change
    handleChange = input => e => {
        this.setState({ [input]: e.target.value });
    }

    // MAKING POST REQUEST TO THE API
    formHandler = () => {
        const valuesToSubmit = {
            email: this.state.email,
            password: this.state.password,
            confirmPassword: this.state.confirmPassword,
            twitter: this.state.twitter,
            facebook: this.state.facebook,
            googlePlus: this.state.googlePlus,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            phone: this.state.phone,
            adress: this.state.adress
        }
        console.log('Form:')
        console.log(valuesToSubmit)
        axios.post('http://localhost:9000/api', valuesToSubmit)
            .then(function (response) {
                console.log(response);
                //Perform action based on response
            })
            .catch(function (error) {
                console.log(error);
                //Perform action based on error
            });
    }


    render() {
        const { step } = this.state;
        const { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress } = this.state;
        const values = { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress };

        switch (step) {
            case 1:
                return (
                    <StepOne
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                )
            case 2:
                return (
                    <SocilaProfiles
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                        prevStep={this.prevStep}
                    />
                )
            case 3:
                return (
                    <PersonalDetails
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        prevStep={this.prevStep}
                        values={values}
                    />
                )
            case 4:
                return (
                    <Confirm
                        nextStep={this.nextStep}
                        prevStep={this.prevStep}
                        values={values}
                        handleChange={this.handleChange}
                        formHandler={this.formHandler(this.state.valuesToSubmit)}
                    />
                )
            case 5:
                return <Success />
                
        }
    }
}

export default UserForm;

import React, { Component } from 'react';
import '../index.css';

export class Confirm extends Component {
    continue = e => {
        e.preventDefault();
        // PROCESS FORM -> SEND DATA TO API(EXPRESS)
        this.props.nextStep();
    }

    submit = e => {
        e.preventDefault();
        this.props.formHandler();
    }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }

    render() {
        const { values: { email, password, confirmPassword, twitter, facebook, googlePlus, firstName, lastName, phone, adress }} = this.props;

        return (
            <form onSubmit={this.submit} className="msform">

                <fieldset>
                    <h2 className="fs-title"> Confirm Details </h2>
                    <hr/>
                    <ul className="theList">
                        <li> <strong>Email:</strong> {email} </li>
                        <li> <strong>Twitter:</strong> {twitter} </li>
                        <li> <strong>Facebook:</strong> {facebook} </li>
                        <li> <strong>Google Plus:</strong> {googlePlus} </li>
                        <li> <strong>First Name:</strong> {firstName} </li>
                        <li> <strong>Last Name:</strong> {lastName} </li>
                        <li> <strong>Phone:</strong> {phone} </li>
                        <li> <strong>Adress:</strong> {adress}</li>
                    </ul>
                    <input onClick={this.back} type="button" className="previous action-button" value="Previous" />
                    <input onClick={this.continue} type="button" name="submit" className="submit action-button" value="Submit" />
                </fieldset>
            </form>
        );
    }
}


export default Confirm;