Как организовать вывод элементов компонента react по 4 штуки?

Question

[Руслан]

Здравствуйте!
Нужно чтобы выводились в тегах с классом pac_list_channels_row по 4 дива с содержимым. Данные приходят с компонента выше уровнем в виде массива. Вот весь код:

const PacListchannels = ({chData}) => {
    const rows = chData.length / 4;
    console.log(rows);
    const lastOst = chData.length % 4;
    console.log(lastOst);

    const elements = chData.map((item, i) => {
        return (
            <div className="pac_list_channels_row">
                <div className="channels_one">
                    <div className="channels_one_img">
                        <img src={item.channelImg} alt=""/>
                    </div>
                    <div className="channels_one_name">
                        <p>{item.channelName}</p>
                    </div>
                </div>
            </div>
            
        )
    })

    return (
        <div className="pac_list_channels">
            {elements}            
        </div>
    );
  }

В данный момент, как видно в коде, в цикле каждый элемент выводится в div с классом pac_list_channels_row, а нужно по 4 их туда выводить. 4 вывелось и пошла новая строка. В нативном js знаю как сделать это условием, а в react так не получается.