Creating Pattern of random shapes with a looped array of shapes in Processing

I am trying to create a squared sketch with 10 times 10 random loaded shapes out of four individual .svg shapes that form a squared grid. Therefore I created an array of 10 objects and looped it to a column. In these objects I load random one of four shapes. Perfect – a column out of four random shapes – this column then I wanted to loop in a row… And here is my Problem… The loop just repeats the whole column but does not update its randomness of shapes. I think this is because I made an object of the whole column and looped it as an entity…

So i tried to put the loop that creates the X Row and the Y Columns – the grid so to speak – inside the object and then both outside the object… and I either get total randomness (in every box of the grid the randomness flashes through shape1, shape2, shape3…) or one random shape throughout the whole grid everytime I rerun the sketch.

I am really stuck with this one: an array of 100 objects (or 10 that get looped to 100) filled with random shapes out of an 4 shapes long PShape array – arranged to a grid of 10 times 10 Tiles/Boxes. Thats what I want to achieve.

Thats the code: The arrays and the loop that creates more colums from left to right:

PShape [] typos = new PShape[4];
int xWidth;
int yHeight;

Letter[] letters = new Letter[10];
void setup() {
  size(1080, 1080);
  xWidth = width/10;
  yHeight = xWidth;
  for (int i=0; i <typos.length; i++) {
    typos[i] = loadShape("letter"+i+".svg");
  }

  for (int i= 0; i < letters.length; i++) {
    int index = int(random(0, 4));
    letters[i] = new Letter(typos[index], xWidth/2, yHeight*i);
  }
}

void draw() {
  background(#d1d1d1);
  translate(xWidth/2, yHeight/2);
  for (int i= 0; i <letters.length; i++) {
    letters[i].display();
  }
}

And here is the object itself (one column):

  class Letter {
  int xWidth;
  int yHeight;
  int position;
  float posX;
  float posY;
  PShape typo;

Letter(PShape tempShape, float tempposX, float tempposY) {
    //shapeMode(CENTER);   
    xWidth = width/10;
    yHeight = xWidth;
    posX = tempposX;
    posY = tempposY;
    typo = tempShape;
   }
    void display() {
      for (int a = 0; a < 10; a++){ 
      shape(typo, xWidth*a, posY, 108, 108);
    
  }
}
}

As I said at first I tried to wrap the second loop around the first – but this gave me these two extreme outputs... so I thought to put it inside the object (make a column) then loop the whole column. But unfortunately its not the solution. What am I missing here?