I'm trying to figure out the logic behind the arranging elements in the Pixi JS ScrollBox.

I created a list of Graphics objects (squares) with the same size and offset. When the list is passed to a ScrollBox object, the offset (actually, only the half due to the stroke thickness) is kept at the left and upper borders of the window but disregarded between the squares.

const sbItems: Graphics[] = [];
for (let r = 0; r < 10; ++r) {
  for (let c = 0; c < 5; ++c) {
    sbItems.push(
      new Graphics()
        .roundRect(10, 10, 95, 95, 15)
        .fill('orange')
        .stroke({ width: 5, color: 'white' })
    );
  }
}
const scrollBox: ScrollBox = new ScrollBox({
  width: 0.9 * app.screen.width,
  height: 10 * app.screen.height,
  items: sbItems
});

Here is the result:

Also, the PixiJS DevTools shows the following positions for the squares:

The positions of the ScrollBox and the List are also {x: 0, y: 0}:

Question: How are objects arranged in the Pixi JS ScrollBox?