I am building a MERN stack employee management system application. I have created two schemas(one for adding departments and the other for adding employees) I have created and want them to reference each other. These are what I’ve done so far:

1. Creating a department and inserting it my mongodb database (done)
2. Displaying departments in table form to the front end (done)
3. Creating a form to collect employee details to create employee (done)

On this form I have a select html element that is whose dropdown options are populated with the various departments that have already been created. the next step I want to achieve is once the request is made to submit user data to create employee, the object containing the informations for the user e.g. name, email, etc. should include the object id of the particular department that the user chose by referencing that particular department in the departments collection. For now what I get is that when the employee data is submitted to the database, the department mysteriously disappears. I would appreciate if anyone could help me figure this out. I will add code below:

Schema for adding employee:

import mongoose from 'mongoose';
import dotenv from 'dotenv'



dotenv.config()


const MONGOOSE_URL = process.env.URL

mongoose
.connect(MONGOOSE_URL)
.then(() => {
    console.log('Database Connected!')
})
.catch((error)=>{
    console.log(error)
})

const employeeSchema = new mongoose.Schema({
    name: {
        type: String, 
        required: true
    },
    email: {
        type: String, 
        required: true
    },
    password: {
        type: String, 
        required: true
    },
    salary: {
        type: Number
    },
    address: {
        type: String, 
        required: true
    },
    image: {
        type: String
    },
    department_id: { 
        type: mongoose.Schema.Types.ObjectId, 
        ref: 'departments' 
    },
    createdAt: {
        type: Date,
        required: true,
        default: Date.now
    }
})


const employeeModel = new mongoose.model('employees', employeeSchema)


export default employeeModel

Schema for adding department:

import mongoose from 'mongoose';
import dotenv from 'dotenv'


dotenv.config()


const MONGOOSE_URL = process.env.URL

mongoose
.connect(MONGOOSE_URL)
.then(() => {
    console.log('Database Connected!')
})
.catch((error)=>{
    console.log(error)
})

const departmentSchema = new mongoose.Schema({
    name: String
})


const departmentModel = new mongoose.model('departments', departmentSchema)


export default departmentModel

Admin router:

router.post('/add_employee', async (req, res) => {
    const saltRounds = 10;
    const hashedPassword = await bcrypt.hash(req.body.password, saltRounds);

    const user = ({
        "name": req.body.name,
        "email": req.body.email,
        "password": hashedPassword,
        "address": req.body.address,
        "salary": req.body.salary,
        "image": req.body.image,
        "department": req.body.department_id
    })
    
   
        try {
            await employeeModel.create(user);
            return res.json({ Status: true });
        } catch (err) {
            return res.json({ Status: false, Error: 'Query Error' });
        }
   

})

React front end code for populating select element with department options from database:

<div className='col-12'>
                        <label for='department' className='form-label'>
                            Department
                        </label>
                        <select
                            name='department'
                            id='department'
                            className='form-select'
                            onChange={(e) => setEmployee({ ...employee, department_id: e.target.value })}
                        >
                            {department.map(d => {
                                return <option value={d.id}>{d.name}</option>
                            })}
                        </select>
                    </div>