tengo dos react-select, en uno de ellos selecciono un estado de la república y lo que quiero es que al seleccionar ese estado me cambie en el otro react-select los municipios de ese estado a partir de los arreglos que tengo. Entonces básicamente si selecciono el estado de Chihuahua quiero que me regrese en el otro select los municipios de ese estado. El código que tengo es el siguiente:
const estados = [
{ value: 'Aguascalientes', label: 'Aguascalientes' },
{ value: 'Chiapas', label: 'Chiapas'},
{ value: 'Chihuahua', label: 'Chihuahua'}
];
const Chihuahua = [
{value: 'Ahumada',label:'Ahumada'},
{value:'Aldama',label:'Aldama'},
{value:'Allende',label:'Allende'}
]
const seleccionarEstado = async municipios => {
console.log(municipios);
}
<div className="w-1/2">
<div className="ml-2">
<label className=" text-gray-700 text-sm font-bold" htmlFor="nombre">
Estado
</label>
<Select
className=""
options={ estados }
components={animatedComponents}
defaultValue={estados[5]}
isMulti={false}
onChange={ e=> seleccionarEstado(e.target.value)}
placeholder="Busque el estado"
noOptionsMessage={ () => "No hay resultados"}
/>
</div>
</div>
<div className="w-1/2">
<div className="ml-4">
<label className=" text-gray-700 text-sm font-bold" htmlFor="nombre">
Nombre
</label>
<Select
className=""
options={ Chihuahua }
components={animatedComponents}
isMulti={false}
// onChange={}
placeholder="Busque el estado"
noOptionsMessage={ () => "No hay resultados"}
/>
</div>
</div>
De antemano muchas gracias por su respuesta.