Cannot show selected value from <Select /> element in React with Inertia

I have an edit form on Edit.js that retrieves data from the database. However, the <Select /> element does not show the selected value. This component works fine elsewhere in my project, but on this particular form on the Edit.js page, it's failing. I need the second pair of eyes on this. This is the structure for the component:

export default function Select({id, name, onChange, className, options, value, placeholder, required,}) {
    return (
        <>
            <select
                className={
                    `border-gray-300 focus:border-indigo-200 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-xl shadow-sm sm:text-sm` +
                    className
                }
                name={name}
                required={required}
                id={id}
                onChange={onChange}
                value={value}
            >
                <option>{placeholder}</option>
                {options.map((option, index) => {
                    return (
                        <option key={index} value={option.value}>
                            {option.label}
                        </option>
                    );
                })}
            </select>
        </>
    );
}

This is what I have on the frontend Edit.js page:

const {data, setData} = useForm({
       gender: user.gender
})

<form>
      <Select value={data.gender} onChange={handleChange} options={genderSelection} className={`block w-full sm:text-sm shadow-inner`} placeholder={`Select gender`} name={`gender`}
       />
</form>