Form data not submitting to external API

I’m passing next js form parameters to an external API written in Laravel which send a simple email, the API working fine when I send a post request using postman but , when I submit below Next Js form to the API nothing happen, no call make to API please help me

import React, {Component} from 'react'
import fetch from 'isomorphic-unfetch'

class Contact extends Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit = async () => {
        var email = this.refs.email.value.trim();
        var message = this.refs.message.value.trim();

        const res = await fetch('http://iotdash.dev/contact', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: JSON.stringify({
                'email': email,
                'message': message
            })
        });
        const data = await res.json();
    };

    render () {
        return (
            <div className="row contact-wrapper container-width center-align">
                <h3>Contact Us</h3>
                <p className="gray-text">Leave us some information and we will be in touch as soon as possible!</p>
                <form onSubmit={this.handleSubmit}>
                    <div className="col m6 form-field left-align">
                        <label className="gray-text">
                            First Name *
                        </label>
                        <input className="gray-text" ref="first_name" required type="text"/>
                    </div>
                    <div className="col m6 form-field left-align">
                        <label className="gray-text">
                            Last Name *
                        </label>
                        <input className="gray-text" ref="last_name" required type="text"/>
                    </div>
                    <div className="col m6 form-field left-align">
                        <label className="gray-text">
                            Email *
                        </label>
                        <input className="gray-text validate" ref="email" required type="email"/>
                    </div>
                    <div className="col m6 form-field left-align">
                        <label className="gray-text">
                            Phone Number
                        </label>
                        <input className="gray-text" ref="phone" type="text"/>
                    </div>
                    <div className="col m12 form-field left-align">
                        <label className="gray-text">
                            Message *
                        </label>
                        <textarea className="gray-text" ref="message" required/>
                    </div>
                    <div className="col m12 left-align contact-button-wrapper">
                        <input className="button button-yellow submit-button" type="submit" value="Contact Us" />
                    </div>
                </form>
            </div>
        )
    }
}

export default Contact

[timneutkens]

Found it 😄 The default event was not prevented, which causes a page refresh.

handleSubmit = async (event) => {
        event.preventDefault()

[timneutkens]

Great 👍