POS UI extensions - CameraScanner inside of a Stack fails to render

[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.

When a CameraScanner is placed inside a Stack, it fails to render correctly.

Steps to reproduce the behavior:

1. Add CameraScanner into a stack

Expected behavior

CameraScanner should render correctly

Screenshots

Additional context

https://shopify.dev/docs/api/pos-ui-extensions/2024-04/apis/scanner-api#use-cases-conditional-scanner-source-rendering-example (see TS example)

The documentation here also doesn't work completely,

if (sources.include('camera')) {

should be

if (sources.includes('camera')) {

Reproduction code

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

export default extension('pos.home.modal.render', (root, api) => {

  const mainScreen = root.createComponent(
      Screen,
      {
        title: 'Camera Scanner in stack',
        name: 'Camera Scanner in stack',
      },
  );

  const stack = root.createComponent(Stack, {
    direction: 'horizontal',
    flexChildren: true,
  });

  const left = root.createComponent(Stack, {
    direction: 'vertical',
  });

  const right = root.createComponent(Stack, {
    direction: 'vertical',
  });

  const leftText = root.createComponent(Text, null, 'Left');
  const rightText = root.createComponent(Text, null, 'Right');

  const cameraScanner = root.createComponent(
      CameraScanner,
  );

  left.appendChild(leftText);
  left.appendChild(cameraScanner);
  right.appendChild(rightText);

  stack.appendChild(left);
  stack.appendChild(right);

  mainScreen.appendChild(stack)

  root.appendChild(mainScreen);
});