React Axios double form submit - reactjs

Question

I'm building a React + PHP API app which let's visitors of the page subscribe to newsletter. I'm using Hooks, Axios and Typescript as well. I tested the API with Postman and the data gets submitted as it should. But when I do the post from frontend, the data comes over and gets inserted in the database twice - one normal row and an empty row.
My code for frontend
import React, { FormEvent } from 'react';
import { useForm } from "react-hook-form";
import axios from 'axios';
import { BsArrowRight } from 'react-icons/bs';
interface IFormNewsletter {
email: string;
emailProvider: string;
dateCreated: number;
}
const FormNewsletter: React.FC = () => {
const { register, handleSubmit } = useForm<IFormNewsletter>();
const preventDefault = (e: FormEvent) => {
e.preventDefault();
}
const onSubmit = (data: IFormNewsletter) => {
data.emailProvider = data.email.split('#')[1];
data.dateCreated = Math.round((new Date()).getTime() / 1000);
axios.post('http://localhost/mb-backend/api/create', {
email: data.email,
emailProvider: data.emailProvider,
dateCreated: data.dateCreated
})
.then((response) => {
console.log(response);
}, (error) => {
console.log(error);
});
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="input-box">
<input ref={register} className="newsletter" type="text" name="email" id="email" placeholder="Type your email address here…" />
<button type="submit" className="submit" name="submit" id="submit"><BsArrowRight className="submit-arrow" /></button>
</div>
<div className="tos-box">
<label className="check-container">
<input type="checkbox" />
<span className="checkmark"></span>
</label>
<span className="tos-label">I agree to terms of service</span>
</div>
</form>
)
}
export default FormNewsletter;
This is how the post gets inserted:
What I tried is to use the preventDefault method, but it stops the form from submitting at all:
<form onSubmit={(e) => {
e.preventDefault();
handleSubmit(onSubmit);
}}>
I also tried to use fetch instead of axios but the result is the same. I'm new to React and would appreciate the help.
EDIT:
The backend looks like this:
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Access-Control-Allow-Headers,Content-Type,Access-Control-Allow-Methods,Authorization,X-Requested-With');
include_once '../config/Database.php';
include_once '../models/User.php';
$database = new Database();
$db = $database->connect();
$user = new User($db);
$data = json_decode(file_get_contents("php://input"));
$user->dateCreated = $data->dateCreated;
$user->email = $data->email;
$user->emailProvider = $data->emailProvider;
if ($user->create()) {
echo json_encode(
array('message' => 'User created')
);
} else {
echo json_encode(
array('message' => 'Could not create user')
);
}

Answer 1

add disabled={formState.isSubmitting}>
<button type="submit" disabled={formState.isSubmitting}> className="submit" name="submit" id="submit"><BsArrowRight className="submit-arrow" /></button>