Реагировать на цепочку выбора, если родитель получил значение

Question

Я создаю динамически выбираемые раскрывающиеся списки из схемы json, которые связаны друг с другом в том смысле, что параметры генерируются динамически с помощью вызова asyn c, если родительский элемент уже имеет выбранное значение

здесь Мой пользовательский компонент выбора:

import React, { useState, useEffect } from "react";

import arrow, {
  ReactComponent as ArrowIcon,
} from "./../../images/icons/arrow-down.svg";

export const SelectOptions = (props) => {
  const { source, parent, value } = props;
  const [options, setOptions] = useState([]);

  useEffect(() => {
    if (source) {
      fetch(process.env.REACT_APP_API_BASE_URL + source)
        .then((data) => data.json())
        .then((data) => {
          if (typeof data[0].options !== "undefined") {
            const groups = data.length;
            let options = [];

            for (let i = 0; i < groups; i++) {
              let optGroupOptions = [];

              data[i].options.map((opt) => {
                optGroupOptions.push(
                  <option key={opt.value} value={opt.value}>
                    {opt.label}
                  </option>
                );
              });

              const optGroup = (
                <optgroup key={`label_` + i} label={data[i].label}>
                  {optGroupOptions}
                </optgroup>
              );

              options.push(optGroup);
            }

            setOptions(options);
          } else {
              //case when options are not grouped
          }
        });
    }
  }, [source, parent]);

  return (
    <div>
      {options.length ? (
        <div className="custom-select-options">
          <select name={props.name} onChange={(e) => props.onSelect(e)}>
            <option
              className={"custom-select-options__placeholder"}
              value={props.value.value}
              disabled
              selected
            >
              {props.placeholder}
            </option>
            {options}
          </select>
          <ArrowIcon className={"arrow-down"} />
        </div>
      ) : (
        <div className="custom-select-options">
          <select name={props.name} disabled>
            <option
              className={"custom-select-options__placeholder"}
              value=""
              disabled
              selected
            >
              {props.placeholder}
            </option>
          </select>
          <ArrowIcon className={"arrow-down"} />
        </div>
      )}
    </div>
  );
};

export default SelectOptions;

, который вызывается следующим образом

, создавая родительский элемент

 <SelectOptions
     source={field.source}
     name={field.name}
     placeholder={field.label}
     value={value || ""}
     onSelect={this.handleSelectMobile}
 />

и создавая все его дочерние элементы

<SelectOptions
   name={field.name}
   placeholder={field.label}
   value={value || ""}
   parent={field.dependsOn}
/>

где field.dependsOn ссылается на родителя и должен сделать еще один асинхронный вызов c, если родитель получил значение.

Как я могу проверить, есть ли у родительского раскрывающегося списка ранее значение, и вызвать вызов для компонента