How do I store data from a dropdown in Mongodb - node.js

Question

I am trying to store data from an option, but I'm not sure where I went wrong in the schema or the react code. Is there another I could perhaps do it?
When I run it I get this error.
POST http://localhost:8080/api/user 500 (Internal Server Error)
Here is my model
model.js
const mongoose = require('mongoose');
const jwt = require('jsonwebtoken');
const joi = require('joi');
const { optional } = require('joi');
const userSchema = new mongoose.Schema({
firstName:{type: String, required: true},
lastName:{type: String, required: true},
email:{type: String, required: true},
password:{type: String, required: true},
status:{type: String, enum: ['active', 'inactive'],required : true },
});
userSchema.methods.generateAuthToken = function(){
const token = jwt.sign({_id:this._id}, process.env.JWTPRIVATEKEY)
return token
}
const User = mongoose.model("user", userSchema);
const validate = (data) => {
const schema = joi.object({
firstName:joi.string().required().label("First Name"),
lastName:joi.string().required().label("Last Name"),
email: joi.string().email().required().label("Email"),
password: joi.string().required().label("password"),
status:joi.string().enum['active', 'inactive'].required().label(" ")
});
return schema.validate(data)
}
module.exports = {User, validate}
When I run it I get "error creating user"
routes user.js
const router =require("express").Router();
const {User, validate} = require('../models/user')
const bcrypt = require("bcrypt");
router.post("/", async(req, res) => {
try{
const {error} = validate(req.body)
if(error)
return res.status(400).send({message: error.details[0].message})
const user = await User.findOne({ email:req.body.email})
if (user)
return res.status(409).send({message: "duplicate email"})
const salt = await bcrypt.genSalt(Number(process.env.SALT))
const hashPassword = await bcrypt.hash(req.body.password, salt);
await new User({...req.body, password: hashPassword}).save();
res.status(201).send({message: "User created succesfully"})
}catch(error){
console.log(error.details)
res.status(500).send({message: "Error creating user"})
}
})
module.exports = router;
here are my react.js files, I believe my error should lie here but I maybe be mistaken.
index.jsx
import { useState, useEffect } from "react";
import axios from "axios";
import { Link, useNavigate } from "react-router-dom";
import styles from "./styles.module.css";
const Signup = () => {
const [data, setData] = useState({
firstName: "",
lastName: "",
email: "",
password: "",
status: "",
});
const [error, setError] = useState("");
const navigate = useNavigate();
const handleChange = ({ currentTarget: input }) => {
setData({ ...data, [input.name]: input.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
const url = "http://localhost:8080/api/user";
const { data: res } = await axios.post(url, data);
navigate("/login");
console.log(res.message);
} catch (error) {
if (
error.response &&
error.response.status >= 400 &&
error.response.status <= 500
) {
setError(error.response.data.message);
}
}
};
return (
<div className={styles.signup_container}>
<div className={styles.signup_form_container}>
<div className={styles.left}>
<h1>Welcome Back</h1>
<Link to="/login">
<button type="button" className={styles.white_btn}>
Sign in
</button>
</Link>
</div>
<div className={styles.right}>
<form className={styles.form_container} onSubmit={handleSubmit}>
<h1>Create Account</h1>
<input
type="text"
placeholder="First Name"
name="firstName"
onChange={handleChange}
value={data.firstName}
required
className={styles.input}
/>
<input
type="text"
placeholder="Last Name"
name="lastName"
onChange={handleChange}
value={data.lastName}
required
className={styles.input}
/>
<input
type="email"
placeholder="Email"
name="email"
onChange={handleChange}
value={data.email}
required
className={styles.input}
/>
<input
type="password"
placeholder="Password"
name="password"
onChange={handleChange}
value={data.password}
required
className={styles.input}
/>
<select name ="status">
<option value="1">active</option>
<option value="2">inactive</option>
</select>
{error && <div className={styles.error_msg}>{error}</div>}
<button type="submit" className={styles.green_btn}>
Sign Up
</button>
</form>
</div>
</div>
</div>
);
};
export default Signup;