Рендеринг динамических элементов флажка для 3 каждой строки с шаблоном мопса

Мне нужно отобразить динамический набор элементов флажка с помощью шаблона мопса в моем веб-приложении Express JS.

Я использую стиль Bootstrap с шаблоном мопса. Как отобразить флажки, зависит от переменной approvedUsersArr (в типе JS Array), переданной в шаблон мопса. Элемент в approvedUsersArr - это объект JS с атрибутами objectId и approved_user.

Обычно я хочу, чтобы в каждой строке было три флажка. Когда строка заполняется тремя флажками в столбцах, она начинает новую строку и начинает отображать еще один набор из трех флажков и так далее.

Мой фрагмент мопса выглядит так, как показано ниже.

.modal-body.h-100
    each au, index in approvedUsersArr
        if (index + 1) % 3 == 1
            .row
                .col-md-4
                    .custom-control.custom-checkbox
                        input.custom-control-input(type='checkbox' value=au.objectId id='chbApprovedUser_' + au.objectId)
                        label.custom-control-label(for='chbApprovedUser_' + au.objectId) #{au.approved_user}
        else
                .col-md-4
                    .custom-control.custom-checkbox
                        input.custom-control-input(type='checkbox' value=au.objectId id='chbApprovedUser_' + au.objectId)
                        label.custom-control-label(for='chbApprovedUser_' + au.objectId) #{au.approved_user}

Он отображается, как показано ниже, что неверно.