Error when updating cart attributes

Extensions
1

I’m using the sample code provided to attempt to set/update an attribute on my order. When attempting to set this attribute, I get an error message that says:

“Could not apply attribute changes. Error: reason must be a string: received type undefined”

I couldn’t find anything about this in the docs and am stuck on what to do next.

Any insights would be appreciated.

import {
  reactExtension,
  BlockStack,
  Button,
  Text,
  useAttributeValues,
  useApplyAttributeChange,
  useInstructions,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.contact.render-after',
  () => <Extension />,
);

function Extension() {
  const [giftWrapValue] = useAttributeValues([
    'giftWrap',
  ]);
  const giftWrap = Boolean(giftWrapValue);
  const applyAttributeChange =
    useApplyAttributeChange();
  const instructions = useInstructions();

  async function toggleGiftWrap() {
    const result = giftWrap
      ? await applyAttributeChange({
          type: 'removeAttribute',
          key: 'giftWrap',
        })
      : await applyAttributeChange({
          type: 'updateAttribute',
          key: 'giftWrap',
          value: 'true',
        });
    if (result.type === 'error') {
      console.error(result.message);
    }
  }

  return (
    <BlockStack spacing="tight">
      <Text>
        Gift wrapping:{' '}
        {giftWrap ? 'Added' : 'Not set'}
      </Text>
      <Button
        onPress={toggleGiftWrap}
        disabled={
          !instructions.attributes
            .canUpdateAttributes
        }
      >
        {giftWrap
          ? 'Remove gift wrap'
          : 'Add gift wrap'}
      </Button>
    </BlockStack>
  );
}