I have two Select component and I want to fill them with values from an api call.

One of them is team and the other one is member. After select team, I should get values from member based on selected team.

I have two problem on this.

1. I have seen many examples with predefined options but I want also fill them values from api call.
2. It is relevant to first one, how can I render after user chooses a team from Team Select and show only employees of correspond team in Member Select

PS. I want to use team and member information in other components, so I have used 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>
    )
}

PS: I tried to add codesandbox: https://codesandbox.io/s/heuristic-keldysh-34nwq