Tengo dos componentes Select y quiero llenarlos con valores de una llamada api.

Uno de ellos es equipo y el otro es miembro. Después de seleccionar el equipo, debo obtener valores del miembro en función del equipo seleccionado.

Tengo dos problemas con esto.

1. He visto muchos ejemplos con options predefinidas, pero también quiero llenarlos con valores desde la llamada api.
2. Es relevante para el primero, ¿cómo puedo representar después de que el usuario elige un equipo de Team Select y mostrar solo los empleados del equipo correspondiente en Member Select?

PD. Quiero usar la información del equipo y de los miembros en otros componentes, así que he usado contextApi

 const Filter = () => { const {team, setTeam, member, setMember} = useContext(ActivityContext); const teamSelectChangeHandler = (teamName) => { console.log(teamName, " selected") setTeam(teamName.value) } const memberSelectChangeHandler = (memberName) => { console.log(memberName, " selected") setTeam(memberName.value) } const getTeamOptions = () => { //Example key-value pair from Calculations.getTeams() //[{"HR":"Jessica"},{"IT":"John"}] return Object.keys(Calculations.getTeams()).map((item) => { return { "value": item, "label": item } }) } const getMemberOptionsByTeam = () => { //Example key-value pair from Calculations.getTeams() //[{"HR":"Jessica"},{"IT":"John"}] for (const [key, value] of Object.entries(Calculations.getTeams())) { if(key == team) // team from context return { "value": value, "label": value } } } return ( <div> <Select maxMenuHeight={200} menuPlacement="auto" placeholder="Team List" isMulti={false} isClearable={true} options={getTeamOptions} onChange={teamSelectChangeHandler} /> <Select maxMenuHeight={200} menuPlacement="auto" isDisabled={!team} placeholder="Please Select Member First" isMulti={false} isClearable={true} onChange={memberSelectChangeHandler} options={getMemberOptions} /> </div> ) }

PD: Traté de agregar codesandbox: https://codesandbox.io/s/heuristic-keldysh-34nwq