POS UI extensions - CameraScanner not displaying banner

[jamosaur]

Please list the package(s) involved in the issue, and include the version you are using

"@shopify/ui-extensions": "2024.4.2"

Describe the bug

Using regular JS, displaying a CameraScanner, props for the component seem to be ignored.

Steps to reproduce the behavior:

1. Create Modal using the code below
2. Scan any barcode

Expected behavior

When scanning a barcode or QR code, a banner should appear in the camera view

Additional context

import {
  CameraScanner,
  extension,
  Screen,
  Text,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const mainScreen = root.createComponent(
      Screen,
      {
        title: 'CameraScanner',
        name: 'Camera Scanner Title',
      },
  );

  const cameraScanner = root.createComponent(
      CameraScanner,
      {
        // These are added in just for testing purposes.
        bannerProps: {
          title: 'Scan QR code',
          visible: true,
          variant: 'confirmation',
        },
      },
  );

  const text = root.createComponent(Text, null, 'Scanned data: ',
  );

  const text2 = root.createComponent(Text, null, 'Scan found?');

  mainScreen.append(cameraScanner);
  mainScreen.append(text);
  mainScreen.append(text2);
  root.append(mainScreen);

  api.scanner.scannerDataSubscribable.subscribe(
      (data) => {

        const {data: scannedData} = data;

        if (!scannedData.includes('https://')) {
          // This doesn't seem to do anything
          cameraScanner.updateProps({
            bannerProps: {
              title: 'Invalid QR code',
              visible: true,
              variant: 'alert',
            },
          });
          text2.replaceChildren('Invalid');
        } else {
          // This doesn't seem to do anything
          cameraScanner.updateProps({
            title: 'Valid QR code',
            visible: true,
            variant: 'information',
          });
          text2.replaceChildren('Valid');
        }

        text.replaceChildren(
            `Scanned data: ${scannedData || ''}`,
        );
      },
  );
});