Uncaught RangeError: Maximum call stack size exceededと出てきてしまいました

現在、JavaScriptのみでページネーション（items.nameを５つずつ表示する）を実装しています。
生じた問題は、ブラウザ上では予期している通りの結果が表示されたのですが、関数viewItemsでタイトルの通りエラー構文が出てきてしまいました。
原因として再帰関数？が関係しているらしいので、return漏れを確認する、while文で無限ループが発生している、setIntervalを設置するなどを確認したのですが、いまいち原因がわかりませんでした。
原因がわかる方がいましたら、ご回答お願いします。

以下コード

html
1<p class="title"> Menu</p>
2        <ul id="page_count"></ul>
3        <ul id="contents"></ul>
4        <ul class="pagination">
5            <li id="prev">&lt;</li>
6            <li>1</li>
7            <li>2</li>
8            <li>3</li>
9            <li id="next">&gt;</li>
10        </ul>

css
1body {
2    font-size: 50px;
3    text-align: center;
4    margin: 0 auto;
5    width: 600px;
6}
7
8.pagination {
9    display: flex;
10}
11
12li {
13    list-style: none;
14    margin-left: 5px;
15    margin: 0 auto;
16}
17
18.title {
19    font-size: 70px;
20}

js
1const items = [
2        {"id": 1, "name": "salad"},
3        {"id": 2, "name": "olive_oil"},
4        {"id": 3, "name": "vinegar"},
5        {"id": 4, "name": "sesami"},
6        {"id": 5, "name": "chicken_soup"},
7        {"id": 6, "name": "flour"},
8        {"id": 7, "name": "sesami"},
9        {"id": 8, "name": "salt"},
10        {"id": 9, "name": "pepper"},
11        {"id": 10, "name": "coffee"},
12        {"id": 11, "name": "short_cake"},
13        {"id": 12, "name": "cheese_cake"},
14        {"id": 13, "name": "pudding"},
15        {"id": 14, "name": "pafe"},
16        {"id": 15, "name": "apple_pie"},
17        {"id": 16, "name": "humberger"},
18        {"id": 17, "name": "chocolate"},
19        {"id": 18, "name": "fruit"},
20    ];
21
22
23    const pagination = () => {
24        let li = document.createElement('li');
25        const page_count = document.getElementById('page_count');
26        const main_content = document.getElementById('contents');
27        let current_list = 1; 
28        const step = 5;
29        const pages = Math.ceil(items.length/5);
30
31        page_count.appendChild(li).innerHTML = (current_list) + "/" + pages + " " + "page";
32
33        const item_name = items.map(x => x.name);
34
35        const viewItems = array => {
36            const first = (current_list - 1) * step + 1;
37            const last = current_list * step;
38            while (main_content.lastChild) {
39                main_content.removeChild(main_content.lastChild);
40            }
41            array.forEach((content, i)=> {
42                if (i < first - 1 || i > last - 1) {
43                    return;
44                }
45                let li3 = document.createElement('li');
46                li3.innerText = content;
47                main_content.appendChild(li3);
48            });
49
50        viewItems(item_name);
51        
52            
53        }
54        
55        viewItems(items);
56
57        main_content.appendChild(li).innerHTML = viewItems(items);
58    }
59
60    window.onload = () => {
61        pagination();
62    }