Multiple amp-lists on one page

Question

I am trying to implement multiple amp-lists with pagination on one AMP page. Here is my amp-lists HTML:

<amp-list layout="fixed-height" height="450" src="/wp-json/posts/v2/category/events/1" data-amp-bind-src="'/wp-json/posts/v2/category/events/' + events_pageNumber" binding="no" single-item="" reset-on-refresh="" i-amphtml-layout="fixed-height" i-amphtml-binding="">
    <template type="amp-mustache">
        <p class="info">Page {{currentPage}} of {{pageCount}}</p>                         
        <div class="items">
            {{#posts}}
                <div class="item">
                    strong class="title">{{title}}</strong>
                </div>
            {{/posts}}
        </div>
    </template>
    <div>
        <p class="info">Page 1 of 2</p>                       
        <div class="items">
            <div class="item">
                <strong class="title">Stay up-to-date with the one latest tech trends</strong>
            </div>
        </div>
    </div>
</amp-list>
<div class="navigation">
    <button class="prev" data-amp-bind-hidden="events_pageNumber < 2" on="tap: AMP.setState({ events_pageNumber: events_pageNumber - 1 })" i-amphtml-binding="">Previous</button>
    <button class="next" data-amp-bind-hidden="events_page ? events_pageNumber >= events_page.items.pageCount : false" on="tap: AMP.setState({ events_pageNumber: events_pageNumber ? events_pageNumber + 1 : 2 })" i-amphtml-binding="" hidden="">Next</button>
</div>
<amp-state id="events_page" src="/wp-json/posts/v2/category/events/1" data-amp-bind-src="'/wp-json/posts/v2/category/events/' + events_pageNumber" i-amphtml-layout="container" i-amphtml-binding="" hidden="" aria-hidden="true"></amp-state>


<amp-list layout="fixed-height" height="450" src="/wp-json/posts/v2/category/news/1" data-amp-bind-src="'/wp-json/posts/v2/category/news/' + news_pageNumber" binding="no" single-item="" reset-on-refresh="" i-amphtml-layout="fixed-height" i-amphtml-binding="">
    <template type="amp-mustache">
        <p class="info">Page {{currentPage}} of {{pageCount}}</p>                         
        <div class="items">
            {{#posts}}
                <div class="item">
                    strong class="title">{{title}}</strong>
                </div>
            {{/posts}}
        </div>
    </template>
    <div>
        <p class="info">Page 1 of 2</p>                       
        <div class="items">
            <div class="item">
                <strong class="title">Stay up-to-date with the one latest tech trends</strong>
            </div>
        </div>
    </div>
</amp-list>
<div class="navigation">
    <button class="prev" hidden="" data-amp-bind-hidden="news_pageNumber < 2" on="tap: AMP.setState({ news_pageNumber: news_pageNumber - 1 })" i-amphtml-binding="">Previous</button>
    <button class="next" data-amp-bind-hidden="news_page ? news_pageNumber >= news_page.items.pageCount : false" on="tap: AMP.setState({ news_pageNumber: news_pageNumber ? news_pageNumber + 1 : 2 })" i-amphtml-binding="">Next</button>
</div>
<amp-state id="news_page" src="/wp-json/posts/v2/category/news/1" data-amp-bind-src="'/wp-json/posts/v2/category/news/' + news_pageNumber" i-amphtml-layout="container" i-amphtml-binding="" hidden="" aria-hidden="true"></amp-state>  

Each list has its own _pageNumber and _page vars.

The problem is that on changing page by clicking next/previous buttons of one element [src] attribute is changed for all elements (last digit in url changed to null). How I can avoid applying setState to all elements?