Converting paginated server response to Akita paginated response gives me a list of 100 copies of the last element. Why?

Question

I already have another component that behaves the exact same way as the one I'm building now, but somehow now my element list ends up being just 100 copies of the last element the server returns.

I have a small function that converts the standard paginated response to an Akita version, and that goes well. The issue actually appears when I have my paginatorRef make the get page request.

I have checked and double checked, tried to mess with the types and conversions (they do stack a little bit here) but I haven't been able to get anything working, not a different broken version.

Could maybe my model cause something like this? I say this because I let any object inside my InventoryRequest as any or any | null for the time being, as they are not needed at the moment.

Has anyone at least experienced similar behavior anywhere? I have no idea what I'm dealing with, there are no errors

I have replaced the company's name with "Redacted" or "redacted"

[ ==== inventory-request.component.ts ==== ] This is the main component and view where my data is displayed

export class InventoryRequestsComponent implements OnInit {

  @ViewChild('inventoryRequestsTable') inventoryRequestsTable?: RedactedTableComponent;

  inventoryRequestsColumns: RedactedTableColumn[] = [
    {identifier: "inventory_request_id", title: "Request ID"},
    {identifier: "organization_id", title: "Organization Name"},
    {identifier: "real_warehouse_id", title: "Warehouse"},
    {identifier: "reference", title: "Reference"},
    {identifier: "expected_date", title: "Expected"},
    {identifier: "created_at", title: "Created"},
    {identifier: "note", title: "Notes"},
    {identifier: "status", title: "Status"},
    // {identifier: "actions", title: "Actions"}
  ];

  currentFilters: URLSearchParams = new URLSearchParams();

  paginatedInventoryRequests$: Observable<PaginationResponse<InventoryRequest>> | undefined;

  constructor(@Inject(INVENTORY_REQUESTS_PAGINATOR) public paginatorRef: PaginatorPlugin<InventoryRequest>,
    private inventoryRequestsService: InventoryRequestsService) { }

  ngOnInit() {
    this.paginatedInventoryRequests$ = this.paginatorRef.pageChanges.pipe(
      switchMap((page: number) => {
        this.currentFilters.set('page', page.toString());
        const requestFn = () => this.inventoryRequestsService.get(this.currentFilters).pipe(map((response) => {
          return convertFromRedactedResponse(response);
        }));
        this.paginatorRef.getPage(requestFn).subscribe(data => console.log(data));
        return this.paginatorRef.getPage(requestFn);
      })
    ) as Observable<PaginationResponse<InventoryRequest>>;
  }

  onFilterChanged(value: URLSearchParams) {
    this.currentFilters = value;
    if(this.paginatorRef.currentPage != 1) {
      this.paginatorRef.setFirstPage();
    }
    this.paginatorRef.refreshCurrentPage();
  }
}

[ ==== inventory-request.component.html ==== ]

<redacted-table #inventoryRequestsTable [columns]="inventoryRequestsColumns" [paginatedResponse]="paginatedInventoryRequests$"
  [isLoading]="paginatorRef.isLoading$" (onPageChange)="paginatorRef.setPage($event)">

  <ng-template column="inventory_request_id" let-row >
    <div class="flex items-center text-sm">
      {{row.inventory_request_id}}
    </div>
  </ng-template>
  <ng-template column="organization_id" let-row >
    <div class="flex items-center text-sm">
      {{row.organization_id}}
    </div>
  </ng-template>
  <ng-template column="real_warehouse_id" let-row>
    <div class="flex items-center text-sm">
      {{row.real_warehouse_id}}
    </div>
  </ng-template>
  <ng-template column="reference" let-row>
    <div class="flex items-center text-sm">
      {{row.reference}}
    </div>
  </ng-template>
  <ng-template column="expected_date" let-row>
    <div class="flex items-center text-sm">
      {{row.expected_date | date:'yyyy-MM-dd'}}
    </div>
  </ng-template>
  <ng-template column="created_at" let-row>
    <div class="flex items-center text-sm">
      {{row.created_at | date:'yyyy-MM-dd'}}
    </div>
  </ng-template>
  <ng-template column="note" let-row>
    <div class="flex items-center text-sm">
      {{row.note}}
    </div>
  </ng-template>
  <ng-template column="status" let-row>
    <div class="flex items-center text-sm">
      {{row.status}}
    </div>
  </ng-template>
</redacted-table>

[ ==== conversion code ==== ]

import {PaginationResponse} from "@datorama/akita";

export interface RedactedPaginationResponse<E> {
    current_page: number;
    per_page: number;
    last_page: number;
    data: E[];
    total?: number;
    from?: number;
    to?: number;
    pageControls?: number[];
}

export function convertFromRedactedResponse<E>(response: RedactedPaginationResponse<E>): PaginationResponse<E> {
    return {
        currentPage: response.current_page,
        perPage: response.per_page,
        lastPage: response.last_page,
        data: response.data,
        total: response.total,
        from: response.from,
        to: response.to,
        pageControls: response.pageControls
    };
}

[ ==== injected paginator ==== ]

import { inject, InjectionToken } from '@angular/core';
import { PaginatorPlugin } from '@datorama/akita';
import { InventoryRequestsQuery } from './inventory-requests.query';

export const INVENTORY_REQUESTS_PAGINATOR = new InjectionToken('INVENTORY_REQUESTS_PAGINATOR', {
  providedIn: 'root',
  factory: () => {
    const inventoryRequestsQuery = inject(InventoryRequestsQuery);
    return new PaginatorPlugin(inventoryRequestsQuery).withControls().withRange();
  }
});