Зависимый раскрывающийся список не обновляется немедленно при изменении родительского раскрывающегося списка (MUI) ⇐ Javascript

[Anonymous]

Я создаю форму с помощью React Hook Form с двумя раскрывающимися списками:
Раскрывающийся список «Страна»: список стран.
Раскрывающийся список «Штат»: должен быть указан штат на основе выбранной страны.
Логика фильтрации работает, но раскрывающийся список состояний не обновляется сразу, когда я выбираю страну. Правильные штаты отображаются только после третьего щелчка по раскрывающемуся списку страны.
Ожидаемое поведение:
Когда я выбираю страну, раскрывающийся список штатов должен немедленно отображать штаты для этой страны.
Фактическое поведение:
Обновляется только после нескольких щелчков мышью.
Данные поступают из API в следующем формате:

Код: Выделить всё

countries: {
India: 91,
'United States': 1,
},
states: {
KL: {
stateId: 'KL',
name: 'Kerala',
country: 91,
countryName: 'India',
code: 'KL',   },   CA: {
stateId: 'CA',
name: 'California',
country: 1,
countryName: 'United States',
code: 'CA',
},
},

Я использую специальный хук для сопоставления данных:

Код: Выделить всё

export const useMappedData = () => {
const { data } = useGetMappedDataQuery();

const stateOptions = useMemo(() => {
return data?.states
? Object.values(data.states).map((state) => ({
label: state.name,
value: state.stateId,
countryValue: Number(state.country),
}))
: [];
}, [data?.states]);

const countryOptions = useMemo(() => {
return data?.countries
? Object.keys(data.countries).map((key) => ({
label: key,
value: data.countries[key],
}))
: [];
}, [data?.countries]);

return { countryOptions, stateOptions };
};

Вот код раскрывающегося списка:

Код: Выделить всё

{countryOptions?.length && (

 (

)}
/>

)}


 (

)}
/>

Логика фильтрации:

Код: Выделить всё

const selectedCountry = watch('country') || null;

const filteredStateOptions = useMemo(() => {
if (!selectedCountry) return [];
const countryId = Number(selectedCountry);
return stateOptions.filter((state) => state.countryValue === countryId);
}, [selectedCountry, stateOptions]);

Я пробовал:

• Использовать useWatch вместо просмотра.
• Сбросить поле состояния с помощью setValue при изменении страны.
• Добавление ключа = {selectedCountry в контроллер или раскрывающийся список.

Ни один из этих способов не устранил проблему.
Почему раскрывающийся список состояний обновляется только после нескольких щелчков мыши?
Как сделать так, чтобы он обновлялся немедленно при изменении страны?>

Подробнее здесь: https://stackoverflow.com/questions/798 ... hanges-mui