Reset select value depending on siblings state in react-hook-form - reactjs

Question

I have two siblings and one is watching the state of another.
<Controller
control={control}
name="selectedBirthYear"
defaultValue={years[0]}
render={({ field }) => (
<SelectBirthYear
field={field}
years={years}
value={selectedYear}
defaultValue={selectedYear}
onChange={useEffect(() => {setSelectedYear(field.value)})}
/>
)}
/>
and
<Controller
control={control}
name="selectedBirthMonth"
defaultValue={months[0]}
render={({ field }) => (
<SelectBirthMonth
field={field}
startYear={startYear}
selectedYear={selectedYear}
months={months}
value={selectedMonth}
defaultValue={selectedMonth}
reducedMonths={reducedMonths}
onChange={useEffect(() => setSelectedMonth(field.value))}
/>
)}
/>
These two components are part of a Form parent. But, the issue is, that my useEffect, which watches year change, is not firing in combination with the Controller:
const watchYearChange = () => {
if(Number(selectedYear.name) == startYear){
setSelectedMonth(reducedMonths[reducedMonths.length - 1]);
}
};
useEffect(() => watchYearChange(), [selectedYear])
So, I was thinking to put this logic inside of the component itself and 'reset' the value of month on year change (Number(selectedYear.name) == startYear)
I've been experimenting, but for now with no success.
export const SelectBirthMonth = ({
startYear,
selectedYear,
months,
field,
selectedMonth,
setSelectedMonth,
reducedMonths}) => {
const { onChange, value } = field;
const watchYearChange = () => {
if(Number(selectedYear.name) == startYear){
setSelectedMonth(reducedMonths[reducedMonths.length - 1]);
}
console.log(reducedMonths[reducedMonths.length - 1]);
};
useEffect(() => watchYearChange(), [selectedYear])
return (
<Listbox value={Number(selectedYear.name) == startYear ? value == reducedMonths[reducedMonths.length - 1] : value} onChange={onChange}>
{({ open }) => (
<>
<Listbox.Label className="block text-sm font-medium text-gray-700">Geburtsmonat</Listbox.Label>
<div className="mt-1 relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-yellow-500 focus:border-yellow-500 sm:text-sm">
<span className="block truncate">{value?.name}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
</Listbox.Button>
<Transition
show={open}
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options
static
className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
>
{ Number(selectedYear.name) == startYear ? reducedMonths.map((month) => (
<ListboxOption
key={month.id}
value={month}
date={month.name}
>
</ListboxOption>
)) : months.map((month) => (
<ListboxOption
key={month.id}
value={month}
date={month.name}
>
</ListboxOption>
))
}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)
}
Any ideas, how to 'reset' value, which is already coming from field of react hook form? I am really stuck.