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");
  };

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

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

<div [formGroup]="changeForm" style="padding: 40px;">
  <goabx-form-item label="Size" requirement="optional" helpText="Choose the size to change the list below">
    <goabx-dropdown formControlName="parentDropdown" placeholder="Select a value" name="parent">
      <goabx-dropdown-item *ngFor="let parent of parents" [value]="parent" [label]="parent" />
    </goabx-dropdown>
  </goabx-form-item>

  <goabx-form-item label="Items" requirement="optional" mt="xl">
    <goabx-dropdown formControlName="childDropdown" placeholder="Select a value" name="children">
      <ng-container *ngIf="children.length > 0">
        <goabx-dropdown-item
          *ngFor="let child of children; trackBy: generateUniqueKey"
          [value]="child"
          [label]="child"
          [mountType]="'reset'"
        />
      </ng-container>
    </goabx-dropdown>
  </goabx-form-item>
</div>

const parentDropdown = document.getElementById('parent-dropdown');
const childDropdown = document.getElementById('child-dropdown');

const childrenAll = ['Bus', 'Elephant', 'Key', 'Pen', 'Watch', 'Truck'];
const childrenBig = ['Elephant', 'Truck', 'Bus'];
const childrenSmall = ['Key', 'Pen', 'Watch'];

function updateChildren(items) {
  childDropdown.innerHTML = '';
  items.forEach(item => {
    const dropdownItem = document.createElement('goa-dropdown-item');
    dropdownItem.setAttribute('value', item);
    dropdownItem.setAttribute('label', item);
    dropdownItem.setAttribute('mount', 'reset');
    childDropdown.appendChild(dropdownItem);
  });
}

parentDropdown.addEventListener('_change', (e) => {
  const value = e.detail.value;
  if (value === 'All') updateChildren(childrenAll);
  else if (value === 'Big') updateChildren(childrenBig);
  else updateChildren(childrenSmall);
});

childDropdown.addEventListener('_change', () => {
  console.log('Item selected');
});

<div style="padding: 40px;">
  <goa-form-item version="2" label="Size" requirement="optional" helptext="Choose the size to change the list below">
    <goa-dropdown version="2" id="parent-dropdown" placeholder="Select a value" name="parent">
      <goa-dropdown-item value="All" label="All"></goa-dropdown-item>
      <goa-dropdown-item value="Big" label="Big"></goa-dropdown-item>
      <goa-dropdown-item value="Small" label="Small"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>

  <goa-form-item version="2" label="Items" requirement="optional" mt="xl">
    <goa-dropdown version="2" id="child-dropdown" placeholder="Select a value" name="children">
    </goa-dropdown>
  </goa-form-item>
</div>