Estoy tratando de usar los datos de respuesta del servidor para crear mi componente de selección de país y provincia. primero, el usuario elige el país. Luego, enviamos una solicitud al servidor con la identificación del país seleccionado, obtenemos las provincias del país y luego volvemos a representar el componente seleccionado de la provincia con nuevos datos. finalmente, envío el formulario pero muestro que el país de error es un campo obligatorio . Estoy agregando al componente de selección de país (onChange) y guardando la identificación del país seleccionado en el estado, pero no resuelve este problema. a continuación se muestra mi código de componente de opción de selección:

 <RHFSelect value={selects.country} name="country" label="Country" placeholder="Country" onChange={(e) => handleCountrySelect(e.target.value)}> <option value="" /> {countries.map((option) => ( <option key={option.id} value={option.id}> {option.name} </option> ))} </RHFSelect>

mi estado

 const [selects, setSelects] = useState({ country: undefined, province: undefined });

en la función de controlador de cambios

 const handleCountrySelect = (id) => { setSelects((props) => ({ ...props, country: id })); getProvince(id); };

Estoy usando el código fuente mínimo del tablero y es para manejar el formulario usando el formulario de gancho de reacción

 const methods = useForm({ resolver: yupResolver(UpdateUserSchema), defaultValues, });