Axios POST request reloads page even after e.preventDefault() : React - node.js

Question

So Im building a dummy social media application for my resume with NodeJS, MongoDB and React. As such, I have a NewPost form in which user can attach videos or images as files and enter their post captions. I have used Multer on Backend and I have tested my route on Postman and BackEnd is working fine. The only problem is that my form wont send the data at all. I have tried e.preventDefault() but as soon as I make POST axios request the page reloads and I get Request Aborted error in console and since the data is not sent to BackEnd, no posts are created.
One more odd thing I noticed is that when the content is image, posts are created- maybe because by the time it reloads, the images are uploaded already. In any case, my BackEnd is fine- only problem is with the form.
Here is my NewPost Component
import React from 'react';
import './NewPost.css';
import { useParams } from 'react-router-dom';
import axios from 'axios';
const NewPost = (props) => {
const params = useParams();
const submitHandler = async (e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
formData.append('user', params.userId);
console.log(formData.get('user'));
console.log(formData.get('content'));
console.log(formData.get('caption'));
const content = formData.get('content').name;
const imgExt = ['jpg', 'jpeg', 'png', 'avif', 'apng', 'pjp', 'webp', 'svg', 'bmp'];
const ext = content.split('.')[1];
let url;
if (imgExt.includes(ext)) url = `/api/v1/posts/create/contentImage`;
else url = `/api/v1/posts/create/contentVideo`;
try {
const res = await axios.post(url, formData);
if (res.data.status === 'success') {
console.log('Post created successfully!!');
}
} catch (err) {
console.log(err.message);
}
};
return (
<div className="container new-post-box">
<div className="login-form new-post-form">
<button
className="btn-mobile-nav new-post-box-close-btn"
>
<ion-icon name="close" class="overlay-close"></ion-icon>
</button>
<h2 className="heading-secondary heading-login ma-bt-lg">Whats on your mind</h2>
<form className="form form--login" id="login-form" onSubmit={submitHandler}>
<div className="form__group">
<label className="form__label" htmlFor="caption">
Caption
</label>
<input
className="form__input"
id="caption"
type="text"
name="caption"
placeholder="This is an example"
required="required"
/>
</div>
<div className="file-input-box">
<label className="form__label" htmlFor="caption">
Upload Content
</label>
<input
className="form__upload"
type="file"
name="content"
accept="video/*, image/*"
id="content"
/>
<label htmlFor="content" className="form__label fileInput">
Choose file
</label>
</div>
<div className="form__group">
<button className="btn btn--green postSubmitBtn">Submit</button>
</div>
</form>
</div>
</div>
);
};
export default NewPost;
NewPost.css
.form__upload {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.form__upload:focus + label {
outline: 3px solid #673ab7;
outline-offset: 3px;
}
.form__upload + label {
color: #673ab7;
display: inline-block;
text-decoration: none;
border-bottom: 2px solid #673ab7;
padding: 3px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
cursor: pointer;
}
.form__upload + label:hover {
background-color: #673ab7;
color: #fff;
-webkit-box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.new-post-box {
margin: 4rem auto;
}
.form__label {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 0.75rem;
}
.form__label.fileInput {
margin-bottom: 2.5rem;
font-weight: 600;
}
.postSubmitBtn {
margin: 1rem 11rem;
}
.login-form.new-post-form {
max-width: 51rem;
padding: 4.4rem 7rem;
position: relative;
}
.file-input-box {
display: flex;
align-items: baseline;
gap: 2.4rem;
}
.newpost-caption-closebtn-box {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.btn-mobile-nav.new-post-box-close-btn {
position: absolute;
top: 20px;
right: 14px;
}
Run it on your local machine and please tell me what Im doing wrong. I have almost completed my project and this is for my resume. Without thi working, my entire 2 months hard work will go to waste! Any suggestions would be appreciated! Thank you for your time.