Checkout UI Extension Icon not changing source

[charles_loder]

I have a simple Checkout UI Extension that displays `Disclosure ` component if a certain metafield is on the Line item. Following the example in the docs, I have this:

import {
  reactExtension,
  List,
  ListItem,
  Text,
  Disclosure,
  Pressable,
  View,
  InlineLayout,
  Icon,
  useAppMetafields,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension("purchase.checkout.cart-line-item.render-after", () => <Extension />);

function Extension() {
  try {
    const metafields = useAppMetafields();

    if (!metafields.length) {
      return <></>;
    }

    const metafield = metafields[0];
    const metafieldValue = metafield.metafield.value;

    // though we know the value is stringified JSON
    // we still need to type check it
    if (typeof metafieldValue != "string") {
      return <></>;
    }

    const componentProducts = JSON.parse(metafieldValue) as { title: string }[];

    const componentSection = "components";
    let openIds = [componentSection];

    return (
      <Disclosure
        defaultOpen={componentSection}
        onToggle={(open) => {
          openIds = open;
        }}
      >
        <Pressable toggles={componentSection} padding="extraTight">
          <InlineLayout blockAlignment="start" spacing="base" columns={["auto", "fill", "auto"]}>
            <Text appearance="subdued">Products included:</Text>
            <Icon
              source={openIds.includes(componentSection) ? "chevronUp" : "chevronDown"}
              appearance="subdued"
            />
          </InlineLayout>
        </Pressable>
        <View id={componentSection} padding={"extraTight"}>
          <List spacing={"extraTight"}>
            {componentProducts.map((product) => (
              <ListItem key={product.title}>
                <Text appearance="subdued">{product.title}</Text>
              </ListItem>
            ))}
          </List>
        </View>
      </Disclosure>
    );
  } catch (error) {
    return <></>;
  }
}

In the Disclosure example, it seems like the code is wrong, because openIds is never mutated, so I don't know how the Icon would change.

I've tried useState, but that doesn't work — the extension just doesn't show.