React - value of select element not changing with state change - html

Question

Im working on a project where when creating a user i have to pick city,institution and department. When you pick city you get a list of institution that are in that city and when you pick institutions you get departments. What i want to achieve is when you pick another city, institution and department reset to default value. And the problem is that it doesn't work.
Here is the code:
<select
autoComplete="off"
name="institution"
value={caregiverState.institution}
onChange={(e) => {
handleChange(e);
handleDepartmentQuery(e);
}}
>
{institutions.map((institution: IInstitution, index: number): ReactElement => {
return (
<option key={index} value={institution._id}>
{institution.name}
</option>
);
})}
<option value="" selected disabled hidden>
Select institution
</option>
</select>
This is state and handleChange method:
const [caregiverState, setCaregiverState] = useState<ICaregiver>({
name: '',
description: '',
email: '',
city: '',
institution: '',
department: '',
role: 'caregiver',
});
const handleChange = (e): void => {
switch (e) {
case e.target.name === 'city':
return setCaregiverState({
...caregiverState,
institution: '',
department: '',
});
case e.target.name === 'institution':
return setCaregiverState({
...caregiverState,
department: '',
});
default:
return setCaregiverState({
...caregiverState,
[e.target.name]: e.target.value,
});
}
};
Problem is even if i change state to "" select element does't change it to :
<option value="" selected disabled >
Select institution
</option>
I actually get the firstinstitution from map()
Thanks in advance!