Reactjs – Shadcn ui select component state not updating after change

I’m a shadcn ui and react newbie, just tell me why the value of branch and year state variables won’t update. I’m not using zod and react-hook-form.

import React, { useState } from "react";
import { Button } from '../components/ui/button'
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select"
import { Label } from "@/components/ui/label"

export default function CreateProfile() {
    const [fileName, setFileName] = useState(""); // State to store the selected file name
    const [branch, setBranch] = useState('cse'); // State to store the selected branch
    const [year, setYear] = useState('2nd'); // State to store the selected year

    const handleSubmit = async (e) => {
        e.preventDefault();
        // Add the logic to save the data to the database
        console.log({ fileName, branch, year });
    }

    return (
        <>
            <section className='bg-[#09090b] min-h-screen p-12 flex-col flex items-center justify-center'>
                <h1 className="text-4xl font-bold text-white capitalize scroll-m-20 lg:text-5xl">
                    Welcome Priyanshu! Now Create Your Profile
                </h1>

                <h4 className="mt-5 text-xl tracking-tight text-white scroll-m-20">
                    This is what viewers will see when they click on your profile through leaderboard. You can edit this information at any time.
                </h4>

                <form className="w-full max-w-4xl mt-8 sm:mt-16" onSubmit={handleSubmit}>
                    <div className='flex flex-col md:flex-row md:gap-x-6'>
                        <div className='md:w-1/2'>
                            <div className="max-w-md">
                                <div className="flex flex-col items-center justify-center px-6 py-8 border border-gray-400 border-dashed rounded-lg">
                                    <svg className="w-12 h-12 mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                                    <p className="mb-4 text-lg text-center text-gray-600">Drag & drop your resume here</p>
                                    <p className="mb-4 text-sm text-center text-gray-500">or</p>
                                    {/* Input element to select file */}
                                    <input
                                        type="file"
                                        className="hidden"
                                        id="fileInput"
                                        onChange={(e) => setFileName(e.target.files[0].name)}
                                    />
                                    <label htmlFor="fileInput" className="px-4 py-2 font-bold text-white transition duration-300 ease-in-out bg-blue-500 rounded-lg cursor-pointer hover:bg-blue-600">Browse files</label>
                                    {/* Display the selected file name */}
                                    {fileName && (
                                        <p className="mt-4 text-sm text-center text-gray-500">Selected file: {fileName}</p>
                                    )}
                                </div>
                            </div>
                        </div>
                        <div className='mt-8 md:w-1/2 md:mt-0'>
                            <div className="mb-6">
                                <Label htmlFor="branch" className="text-white">Select your branch</Label>
                                <Select id="branch" value={branch} onChange={(e) => setBranch(e.target.value)}>
                                    <SelectTrigger className="text-white">
                                        <SelectValue value="cse" placeholder="Computer science engineering" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectItem value="cse">Computer science engineering</SelectItem>
                                            <SelectItem value="etc">Electronics & telecommunication</SelectItem>
                                            <SelectItem value="mech">Mechanical Engineering</SelectItem>
                                            <SelectItem value="civil">Civil Engineering</SelectItem>
                                            <SelectItem value="elec">Electrical Engineering</SelectItem>
                                            <SelectItem value="other">Other</SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className="mb-6">
                                <Label htmlFor="year" className="text-white">Select current year</Label>
                                <Select id="year" value={year} onChange={(e) => setYear(e.target.value)}>
                                    <SelectTrigger className="w-full text-white">
                                        <SelectValue placeholder="Second" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectItem value="1st">First</SelectItem>
                                            <SelectItem value="2nd">Second</SelectItem>
                                            <SelectItem value="3rd">Third</SelectItem>
                                            <SelectItem value="4th">Fourth</SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>
                            <div className='flex items-center justify-center mt-8 sm:mt-12'>
                                <Button>Save & proceed</Button>
                            </div>
                        </div>
                    </div>
                </form>
            </section>
        </>
    )
}

I tried asking chatGPT and Gemini and it wont work, in the documentation they’ve used zod and react-hook-form but I don’t want to use them. I’m so confused please help…