React pdf отображает максимальное количество элементов на странице

Я пытаюсь создать функцию для создания PDF-файла со списком qr-кода. Количество qr-кодов может быть большим, поэтому я хочу ограничить количество qr-кодов максимум 9 и 3 qr-кода подряд. Что мне следует сделать, чтобы добиться этого?

function QrCodePDF(props: QrCodeInfo[]) {
  const qrCodeInfo = props;
  const qrCodeItems: QrCodeInfo[] = [];

  for (let index in qrCodeInfo) {
    qrCodeItems.push({
      dealTitle: qrCodeInfo[index]!.dealTitle,
      qrCodeId: qrCodeInfo[index]!.qrCodeId,
      qrCodeUrl: qrCodeInfo[index]!.qrCodeUrl,
    });
  }

  return (
    <Document>
      <Page
        size = "A4"
        style = {{
          flexDirection: 'column',
          backgroundColor: '#fff',
          color: '#000',
          padding: 10,
        }}
        wrap = {true}
      >
        <View
          style = {{
            flex: 1,
            width: '100%',
            border: '1px solid #000',
          }}
          key = {'QrCodeTable'}
        >
          <View
            style = {{
              display: 'flex',
              width: '100%',
              fontWeight: 'bold',
              fontSize: '20px',
              textAlign: 'center',
              flexDirection: 'row',
              alignItems: 'center',
              borderBottom: '1px solid #000',
            }}
          >
            <Text
              style = {{
                width: '100%',
                padding: 10,
              }}
            >
              Qr Code for {qrCodeItems[0]?.dealTitle}
            </Text>
          </View>
          <View
            style = {{
              display: 'flex',
              flexWrap: 'wrap',
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
            }}
            key = {'QrCodeWrapper'}
          >
            {qrCodeItems.map((item, index) => {
              return (
                <View
                  key = {index}
                  style = {{
                    width: '33.33%',
                    alignItems: 'center',
                    flexDirection: 'row',
                    fontWeight: 'normal',
                    fontSize: '14px',
                    textAlign: 'left',
                    color: '#000',
                    flexWrap: 'wrap',
                    gap: 0,
                  }}
                  break = {index > 3}
                  wrap = {true}
                >
                  <Image
                    src = {item.qrCodeUrl}
                    style = {{ width: '100%', padding: 10 }}
                  ></Image>
                </View>
              );
            })}
          </View>
        </View>
      </Page>
    </Document>
  );
}

Это код, который я пробовал, но он работает не так, как я думаю. Что я могу попробовать дальше?