Too much re-render

[armmiespotter]

const [countriesOptions, setCountriesOptions] = useState<IOptions[]>([])

const [bankNameOptions, setBankNameOptions] = useState<IOptions[]>([])
const [currentCountry, setCurrentCountry] = useState()
const bankTypeOptions: IOptions[] = [
{ name: "1", value: enumBankType.1},
{ name: "2", value: enumBankType.2}
]
const { handleSubmit, watch, setValue, control, formState: { errors, isSubmitting } } = useForm({
resolver: zodResolver(formData),
mode: "onBlur",
defaultValues: {
countryId: "",
bankId: "",
accountName: "",
bankType: 1,
}
})

useEffect(() => {
const fetchBankNameOptions = async () => {
const { data } = await API.OptionsService.GetBanks()
const filteredData = data.flatMap(entry =>
entry.lang.filter(langEntry => langEntry.lang === locale).map(langEntry => ({
name: langEntry.name,
value: langEntry.bankId.toString(),
}))
)
setBankNameOptions(filteredData)
setValue("bankId", filteredData[0]?.value)
}
const fetchCountries = async () => {
const { data } = await API.OptionsService.GetCountry()
const countries = data.map(({ name, id, code, phonePrefix }) => ({ name, value: id.toString(), code, phonePrefix }))
setCountriesOptions(countries)
setValue("countryId", countries[0]?.value)
}
fetchBankNameOptions()
fetchCountries()
}, [locale, setValue])

useEffect(() => {
setCurrentCountry(countriesOptions.find(data => data.value === String(watch("countryId"))))
}, [countriesOptions, watch])

it re-render about 12-16 times can someone help me about this