tiled – Phaser 3 – Show items from object layer – image not loading

Trying to create a collectible objects from object layer I’ve created with Tiled, however, don’t know the proper way to map the objects and my image file which contains several images.

What would be the proper way of showing the image from the object layer created by Tiled?

So far I have come up with this routine which finds the Sprite but it seems the image itself is not loaded as seen in the image below.

   private pickupsGroup!: Physics.Arcade.StaticGroup
   
   ...
   this.pickupsGroup = this.physics.add.staticGroup();
   const pickupsGameObjects = this.map.createFromObjects('Pickups', { });
    pickupsGameObjects.forEach((object) => {
      const sprite = object as Phaser.GameObjects.Sprite;      
      sprite.setDepth(9);
      this.pickupsGroup.add(sprite);
    });

   ...

Text

Tiled. (propsA.png consists of several images, bottom right corner.)

Text

The pot object can be found in the map file outdoors1.json

...
 {
         "draworder":"topdown",
         "id":13,
         "name":"Pickups",
         "objects":(
                {
                 "gid":4775,
                 "height":32,
                 "id":8,
                 "name":"pot",
                 "rotation":0,
                 "type":"pickup",
                 "visible":true,
                 "width":32,
                 "x":396.666666666667,
                 "y":564
                }),
         "opacity":1,
         "type":"objectgroup",
         "visible":true,
         "x":0,
         "y":0
        }, 
...