Refreshing child component that relies on parent component state

Hi all,

I have an option selector for a product which might have multiple options (using choice chips). The parent component has a state var that holds the list of elements that will be used to display the different options and their available choices. The data structure and its initial value is:

  [
    ProductVariantOptionStruct(
        attribute: ProductVariantAttributeStruct(id: 123, name: "Color"),
        valuesList: [
            ProductVariantValueStruct(id: 111, name: "Black"),
            ProductVariantValueStruct(id: 112, name: "Blue")
        ],
        selectedValue: ProductVariantValueStruct(id: 115, name: "Black")
      ),
    ProductVariantOptionStruct(
        attribute: ProductVariantAttributeStruct(id: 221, name: "Size"),
        valuesList: [
            ProductVariantValueStruct(id: 222, name: "Small (S)"),
            ProductVariantValueStruct(id: 223, name: "Medium (M)"),
            ProductVariantValueStruct(id: 224, name: "Large (L)")
        ],
        selectedValue: null
    )
  ]

On initialisation, everything looks fine, Black is selected for the color option and size is unselected. After pressing the button I update the parent component structure so that selectedValue is ProductVariantValueStruct(id: 222, name: "Small (S)") for the size. I can see that the value is fed back to the child component as the new selected value is rendered in a text element, but the choice chips' selection isn't updated even when the initial option is set to optionsData -> selectedValue -> name.

Any idea about what the problem is here?

I've attached screenshots of the elements and their configurations and two images of the UI before and after pressing the button.