Path validation error when pushing in react but works in postman/node directly - node.js

Question

I am trying to push info from my sign up page . I can display it and even get an error 500 but i see a path validation even though i can directly post from postman to my db. Here is my signUp page . My model and route is written all the same so i dont understand
import React from "react";
import {
MDBBtn,
MDBContainer,
MDBRow,
MDBCol,
MDBCard,
MDBCardBody,
MDBCardImage,
MDBInput,
MDBIcon,
MDBCheckbox,
} from "mdb-react-ui-kit";
import Navbar from "./Navbar";
import Footer from "./Footer";
import {useState} from "react";
// const initFormData = Object({
// //declaration de l'objet initiale pour recevoir les credentials
// username: "",
// email: "",
// password: "",
// // passwordCheck: "",ls
// });
const SignUpForm = () => {
const [username, setUsername] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const collectData = async () => {
console.warn("warn" , username,email,password)
let result = await fetch("http://localhost:8000/api/auth/register",{
method: "post",
body: JSON.stringify({username,email,password}),
headers:{
'Content-type':'shop/JSON'
}
});
result = await result.json();
console.warn(result);
}
return (
<>
<Navbar />
<MDBContainer fluid>
<MDBCard className="text-black m-5" style={{borderRadius: "25px"}}>
<MDBCardBody>
<MDBRow>
<MDBCol
md="10"
lg="6"
className="order-2 order-lg-1 d-flex flex-column align-items-center"
>
<p className="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">
Sign up
</p>
<div className="d-flex flex-row align-items-center mb-4 ">
<MDBIcon fas icon="user me-3" size="lg" />
<MDBInput
label="Votre Nom"
id="form1"
type="text"
className="w-100"
value={username}
onChange={(e) => setUsername("username", e.target.value)}
/>
</div>
<div className="d-flex flex-row align-items-center mb-4 ">
<MDBIcon fas icon="user me-3" size="lg" />
<MDBInput
label="Email"
id="email"
type="email"
className="w-100"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="d-flex flex-row align-items-center mb-4">
<MDBIcon fas icon="lock me-3" size="lg" />
<MDBInput
label="Mot de passe"
id="form3"
type="password"
name="password"
value={password}
onChange={(e) => setPassword("password" , e.target.value)}
/>
</div>
<div className="mb-4">
<MDBCheckbox
name="flexCheck"
value=""
id="flexCheckDefault"
label="Subscribe to our newsletter"
/>
</div>
<MDBBtn className="mb-4" size="lg" onClick={collectData()}>
Register
</MDBBtn>
</MDBCol>
<MDBCol
md="10"
lg="6"
className="order-1 order-lg-2 d-flex align-items-center"
>
<MDBCardImage
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-registration/draw1.webp"
fluid
/>
</MDBCol>
</MDBRow>
</MDBCardBody>
</MDBCard>
</MDBContainer>
<Footer />
</>
);
};
export default SignUpForm;
i expected to be able to push but i get