コレクション一覧のループ処理にページネーションを付ける

[hdm]

最大3つまで表示するようにページネーションを作成し、コレクションをループ処理させたところ空白？の要素が生まれて（true以外のコレクションも数に含めれている）ページネーションの挙動がおかしくなってしまいました。

  {%- paginate collections by 3 -%}
    <ul
      class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
      role="list"
    >
      {%- for collection in collections -%}
        {% if collection.metafields.custom.end == true %}
        <li {{ forloop.index }}
          class="collection-list__item grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
          {% render 'card-collection',
            card_collection: collection,
            media_aspect_ratio: section.settings.image_ratio,
            columns: 3
          %}
        </li>
      {% endif %}
      {%- endfor -%}
    </ul>
    {% render 'pagination', paginate: paginate %}
  {%- endpaginate -%}

ループで表示される要素の最大の数が4件なので本来ページの数は2ページで1ページ目に3つの要素が表示されると思っていました。

こちらの解決策などお分かりになる方がいましたらご教授いただきたいです。

よろしくお願い致します。