In select tag the error is showing after clicking on submit button - select

Question

const validationSchema = Yup.object().shape({
timezone: Yup.string().required('Required'),
userdescription: Yup.string().min(2, 'Too Short!').max(100, 'Too Long!').required('Required'),
email: Yup.string().email('Invalid email').required('Required')});
<form onSubmit={handleSubmit}>
<Box>
<FormField name="timezone" label="User Timezone" error={touched.timezone && errors.timezone}>
<Select
name="timezone"
size="medium"
value={values.timezone}
options={options}
onChange={({ value }) => setFieldValue('timezone', value)}
/>
</FormField>
<FormField
name="userdescription"
label="User Description"
error={touched.userdescription && errors.userdescription}
>
<TextInput
name="userdescription"
onChange={handleChange}
onBlur={handleBlur}
value={values.userdescription}
/>
</FormField>
<FormField name="email" label="Admin Email" error={touched.email && errors.email}>
<TextInput
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
value={values.email}
/>
</FormField>
</Box>
{console.log(errors)}
<Box align="end" margin={{ top: 'xlarge' }}>
<Button type="submit" label="Submit" disabled={!Object.keys(touched).length} primary />
</Box>
</form>
Screenshot: https://ibb.co/WcSXddy
After touching each field, all the fields show an error message except the select field which doesn't throw the error immediately after touching it.