Dynamically change items in a dropdown list

const [children, setChildren] = useState<string[]>([]);
  const parents = ["All", "Big", "Small"];
  const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
  const childrenBig = ["Elephant", "Truck", "Bus"];
  const childrenSmall = ["Key", "Pen", "Watch"];

  const loadItems = (value: string) => {
    if (value === "All") setChildren(childrenAll);
    else if (value === "Big") setChildren(childrenBig);
    else setChildren(childrenSmall);
  };

  const logSelection = () => {
    console.log("Item selected");
  };

<GoabFormItem
          label="Size"
          requirement="optional"
          helpText="Choose the size to change the list below">
          <GoabDropdown
            name="parent"
            placeholder="Select a value"
            onChange={(event: GoabDropdownOnChangeDetail) =>
              loadItems(event.value as string)
            }>
            {parents.map(parent => (
              <GoabDropdownItem key={parent} value={parent} label={parent} />
            ))}
          </GoabDropdown>
        </GoabFormItem>

        <GoabFormItem label="Items" requirement="optional" mt="xl">
          <GoabDropdown name="children" placeholder="Select a value" onChange={logSelection}>
            {children.map((child) => (
              <GoabDropdownItem
                key={crypto.randomUUID()}
                value={child}
                label={child}
                mountType="reset"
              />
            ))}
          </GoabDropdown>
      </GoabFormItem>