Electron React, my form is not preventing default event - node.js

Question

I've tried everything, I used the standard input, without success, I already changed the onSubmit to onClick, without success, I already put the function in the onClick button without success, it only works when I remove the input field of type file
I am using Electron React Boilerplate
https://github.com/electron-react-boilerplate/electron-react-boilerplate
import { Button, Pane, FileUploader, FileCard, Alert } from 'evergreen-ui';
import VideoSnapshot from 'video-snapshot';
import Input from 'renderer/components/Input';
import React from 'react';
import axios from 'axios';
import ContainerMenu from '../components/ContainerMenu';
const Admin = () => {
const [name, setName] = React.useState('');
const [genre, setGenre] = React.useState('');
const [path, setPath] = React.useState('');
const [preview, setPreview] = React.useState(null);
const [submitError, setSubmitError] = React.useState('');
const [progress, setProgress] = React.useState(0);
const [files, setFiles] = React.useState([]);
const [fileRejections, setFileRejections] = React.useState([]);
const handleChange = React.useCallback((files) => setFiles([files[0]]), []);
const handleRejected = React.useCallback(
(fileRejections) => setFileRejections([fileRejections[0]]),
[]
);
const handleRemove = React.useCallback(() => {
setFiles([]);
setFileRejections([]);
}, []);
const handleSubmit = async (e) => {
e.preventDefault();
setSubmitError('');
if (files.length === 0) {
setSubmitError('O arquivo não pode ser vazio');
return;
}
try {
const snapshoter = new VideoSnapshot(files[0]);
const previewSrc = await snapshoter.takeSnapshot();
if (previewSrc) setPreview(previewSrc);
} catch (error) {
console.log(error);
}
try {
// const previewData = new FormData();
// const previewObject = {
// preview: previewSrc,
// };
// previewData.append('file', previewObject);
// await axios.post('http://localhost:3000/api/upload', previewData);
const formData = new FormData();
formData.append('file', files[0]);
formData.append('name', name);
formData.append('genre', genre);
formData.append('path', 'videos');
const response = await axios.post(
'http://localhost:3000/api/upload',
formData,
{
onUploadProgress: (progressEvent) => {
const progress = (progressEvent.loaded / progressEvent.total) * 50;
setProgress(progress);
},
}
);
} catch (error) {
console.log(error);
setSubmitError(error.message);
}
};
return (
<div>
<ContainerMenu />
<div className="container">
<form
encType="multpart/form-data"
className="form-group"
onSubmit={handleSubmit}
>
<h2>Enviar Arquivos</h2>
<br />
<div>
<Input
type="text"
label="Nome"
placeholder="Nome ..."
onChange={setName}
value={name}
/>
</div>
<div>
<Input
type="text"
label="Gênero"
placeholder="Gênero ..."
onChange={setGenre}
value={genre}
/>
</div>
<div>
<Pane>
<FileUploader
label="Upload File"
description="You can upload 1 file. File can be up to 50 MB."
maxSizeInBytes={50 * 1024 ** 2}
maxFiles={1}
onChange={handleChange}
onRejected={handleRejected}
renderFile={(file) => {
const { name, size, type } = file;
const fileRejection = fileRejections.find(
(fileRejection) => fileRejection.file === file
);
const { message } = fileRejection || {};
return (
<FileCard
key={name}
isInvalid={fileRejection != null}
name={name}
onRemove={handleRemove}
sizeInBytes={size}
type={type}
validationMessage={message}
/>
);
}}
values={files}
/>
</Pane>
</div>
<div>
<Button
isLoading={progress > 0 && progress < 100}
marginRight={16}
appearance="primary"
type="submit"
>
Enviar {progress.toFixed(2)}%
</Button>
</div>
<br />
<div>{preview && <img src={preview} alt="preview" />}</div>
<br />
<div>
{submitError.length > 0 && (
<Alert intent="danger" title="Error">
{submitError}
</Alert>
)}
</div>
</form>
</div>
</div>
);
};
export default function App() {
return <Admin />;
}