React How can i make new array when i choose some item from picker?

I thinking for few days but cant realize how can i make it. I have 4 json data and 4 picker.Its for city,district,village,neirborhood. In first i must choose city then in second picker it must show district about that i choose city. When i choose district from picker third one must show villages about that district. And neirborhood is same too. In that json datas they have some connection. Like city json have ' id-name' district have 'id-cityid-name' village have 'id-districtid-name' neirborhood have 'id-villageid-name' Like that. But i cant figure out how can i make it. Its my codes I really stuck with that hardly i need some help please. Thank you! My codes :

Elements :

const DropdownElements = [  {    key: 1,    title: "Şehir",    placeholder: "Şehir Seçiniz",    apiUrl: "https://api.npoint.io/995de746afde6410e3bd",    type: "city",    selecteditem: "",    data : [],  },  {    key: 2,    title: "İlçe",    placeholder: "İlçe Seçiniz",    apiUrl: "https://api.npoint.io/fc801dbd3fc23c2c1679",     type: "district",    selecteditem: "",    data : [],  },  {    key: 3,    title: "Köy",    placeholder: "Köy Seçiniz",    apiUrl: "https://api.npoint.io/72cf025083b70615b8bb",    type: "village",    selecteditem: "",    data : [],  },  {    key: 4,    title: 'Mahalle',    placeholder:'Mahalle Seçiniz',    apiUrl: 'https://api.npoint.io/0c04c63923c8ca4e117b',    type: 'neighborhood',  selecteditem: "",    data : [],  },];

Component :

    const PickerCompanent = (props) => {  const [xdata, setData] = useState([]);  const [newData, setNewData] = useState([]);  let x;  let y = [];  // data.filter((a) => a.il_id == "3");  useEffect(() => {    props.datasource.then(setData);    switch (props.type) {      case "city":        x = props.selecteditem;        setNewData(xdata);        break;      case "district":        y = xdata.filter((element) => {          if (props.selecteditem === element.id) {            return element;          }        });        break;      case "village":        console.log("village");        break;      default:        console.log("def");        break;    }  }, [props.datasource]);  return (<Select      showSearch      style={{ width: 200, marginLeft: 15 }}      placeholder={props.placeholder}      optionFilterProp="children"      onChange={(x) => props.onChange(x)}      onFocus={props.onFocus()}      datasource={xdata}      onSearch={props.onSearch()}      filterOption={(input, option) =>        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0      }>      {xdata &&        xdata.map((x) => {          return (<Select.Option key={x.id} value={x.id}>              {x.name}{" "}</Select.Option>          );        })}</Select>  );};

My App :

const App = () => {  const [dataap, setDataAp] = useState([]);  const [idhold, setIDHold] = useState();  const filldata = (value) => {};  function onChange(value) {    setIDHold(value);    console.log(value);  }  const getData = (value, type) => {    return fetch(value)      .then((x) => x.json())      .then((y) => {        return y;      });  };  function onFocus() {}  function onSearch(val) {}  return (<Space>      {DropdownElements.map((x) => {        return (<PickerCompanent            showSearch            selecteditem={idhold}            key={x.key}            placeholder={x.placeholder}            type={x.type}            datasource={getData(x.apiUrl)}            onFocus={onFocus}            onChange={(z) => onChange(z)}            onFocus={onFocus}            onSearch={onSearch}></PickerCompanent>        );      })}</Space>  );};

If you need i can give my teamviewer or skype too. I really need that help thanks for replies!

Sandbox : codesandbox.io/s/runtime-monad-vxit