Infinite Scroll using Angular

Hi all, got a quick question regarding infinite scroll in angular.
I've implemented it, however it keeps duplicating the same api call multiples times. When removing the for-loop it doesn't seem to work. Is there a workaround this?

Here's the code below:
infinite-scroll.service.ts

    companyConversations: DtoCompanyResponse[];

    getItemsCompany(page = 1, itemsPerPage = 10): Observable<DtoCompanyResponse[]> {
        const startIndex = (page - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        this.companyConversations = [];
        for (let i = startIndex; i < endIndex; i++) {
            const bankerRequestObject = {
                bankerUsername: sessionStorage.getItem("msal.usrname"),
                isChat: true,
                teamId: Number(this.teamId),
                pageNumber: page,
                searchParam: ""
            };

            this.conversationService.getCompanyConversations(bankerRequestObject)
                .subscribe((response: DtoBankerConversationCompanyResponse[]) => {
                    this.companyConversations = response;
                });
        }
        return of(this.companyConversations).pipe();
    }