How to display a drop zone in an app bridge modal?

[Fabien_Sebban]

Hi!

I am trying to add a Modal in my Shopify embedded app. Since the Modal component is deprecated (https://polaris.shopify.com/components/deprecated/modal), I have to use the App bridge modal API (https://shopify.dev/docs/api/app-bridge-library/reference/modal) as in the code bellow.

  const fileUpload = !file && <DropZone.FileUpload />;
  const uploadedFile = file && (
    <LegacyStack>
      <Thumbnail
        size="small"
        alt={file.name}
        source={
          validImageTypes.includes(file.type)
            ? window.URL.createObjectURL(file)
            : NoteIcon
        }
      />
      <div>
        {file.name}{' '}
        <Text variant="bodySm" as="p">
          {file.size} bytes
        </Text>
      </div>
    </LegacyStack>
  );

<ui-modal id="my-modal">
  <Box padding="400">
    <DropZone allowMultiple={false} onDrop={handleDropZoneDrop}>
      {uploadedFile}
      {fileUpload}
    </DropZone>
  </Box>
  <ui-title-bar title="title">
    <button variant="primary">Button 1</button>
    <button>Button 2</button>
  </ui-title-bar>
</ui-modal>

The drop zone is correctly rendered but I can not add file neither by clicking the button not dropping a file.

Somebody knows how to display a drop zone?

Thanks.