Struggling with select in a form ( and react hooks ) - reactjs

Question

I just do not manage to implement a select option into my form
How can I call this easy select, with my "handleChangeTimezone" thats already working on inputs form ?
working without Select
<form>
<label for="email"> Username : </label>
<input
type="text"
onChange={(e)=>handleChangeUsername(e.target.value)}
/>
<label for="timzone"> Timezone : </label>
<input
type="text"
onChange={(e)=>handleChangeTimezone(e.target.value)}
/>
</form>
with Select this is what it should look like
but says "handleChangeTimezone" is undefined
import Select from 'react-select';
const options = [
{ value: 'london', label: 'London' },
{ value: 'new-york', label: 'New-york' },
{ value: 'tokyo', label: 'Tokyo' },
];
<form>
<label for="email"> Username : </label>
<input
type="text"
onChange={(e)=>handleChangeUsername(e.target.value)}
/>
<label for="timzone"> Timezone : </label>
<Select
onChange={(e) => handleChangeTimezone(e.target.value)}
options={options}
/>
</form>
as requested the full setTimezoneEl plus some fetching working for inputs.
const [timezoneEl, setTimezoneEl] = useState('')
const handleChangeTimezone= e => {
setTimezoneEl(e.target.value)
}
const handleEditProfile = async () => {
const creds = {
user: {
username: usernameEl,
timezone: timezoneEl
}
};
const config = {
method: 'PUT',
mode: 'cors',
headers: {
Accept: "application/json",
"Content-Type": "application/json",
"Authorization": `Bearer ${Cookies.get('token')}`
},
body: JSON.stringify(creds)
};
const res = await fetch(`${process.env.REACT_APP_API_URL}api/users/${id}`, config);
console.log(res)
try {
} catch (err) {
console.log(err)
}
}
also my actual input looks more like this, had to change it a bit for the purpose of the question
<label for="email"> Username : </label>
<input
type="text"
onChange={handleChangeTimezone}}
/>

Answer 1

I'm not sure why you wouldn't just plug in the same handleTimezoneChange function here either by passing it as a prop (can't tell what your component tree is like) or just redefining it.. but the issue here is that you aren't invoking setSelectedOption in the onChange.
Should use a callback like you did with the input form
onChange={(e) => setSelectedOption(e.target.value)}

Answer 2

This is how I resolved my problem :
<select onChange={(e) => setTimezoneEl(e.target.value)} id="timezone">
<option defaultValue hidden>
{getData.data?.attributes?.timezone}
</option>
{timezones.map((option, index) => (
<option value={option.label} key={index}>
{option.label}
</option>
))}
</select>
```