I'm trying to make pagination work but it's a bit complex for me so I need help. If someone has an idea how to make it, I would be thankful.

I need to show items that the user owns. One page can have maximum of 12 items displayed. I have a pageData array, that returns the number of items for a category. Category "shirts" has 2 items.

pageData = [ {id:'pants',totalItems: 15},
{id:'shirts',totalItems: 2}, {id:'dresses',totalItems: 13}]

On first load I need to show 12 items (lets say 12 pants), on second load (click on load more button) I need to show 3 more pants, 2 shirts and 7 dresses.

Metadata for an item has to be fetched via api (this is just an example how to get id of specific item, I'm trying to put it somehow into code but don't have clear idea how):

 for (let i = 0; i < pageData['pants'].totalItems; i++) {          
          const metadata = await api.getMetadata({
            userId: 'userId',
            id: i,
          });         
        }
 

This is some code that I have but like I said, I don't really have an idea how to make it:

  const getItems = async (pageData, currentPage) => {
    const itemsPerPage = 12;
    let fetchedData = [];
    let total = 0;
    let start = currentPage * itemsPerPage;

    for (let i = 0; i < pageData.length; i++) {
      const minRange = total;
      const maxRange = minRange + itemsPerPage;

      if (start >= minRange && start <= maxRange) {
        const minId = minRange - total;
        const maxId = maxRange - total;

        for (let j = minId; j < maxId; j++) {
          const metadata = await api.getMetadata({
            userId: 'userId',
            id: j,
          });
          fetchedData.push(metadata);
        }
      }
      total += itemsPerPage;
    }
  };