Untitled

  const renderHighlightedVirtualItems = (rowIndex: number) => {
    const hasHighlightedItem = !!highlightedItems[rowIndex];
    const alignStart = rowIndex % 2 === 0;
    let itemCount = rowSize * 2;
    if (hasHighlightedItem) itemCount -= HIGHLIGHTED_ITEM_SIZE - 1;
    let itemIndexCount = 0;
    if (itemCount <= 0) return null;

    return [...Array(itemCount)].map((_, index) => {
      const isHighlightedIndex = alignStart
        ? index === 0
        : index === rowSize - 2;
      const isHighlightedInner = hasHighlightedItem && isHighlightedIndex;
      const itemIndex =
        rowIndex <= highlightedItems?.length
          ? rowIndex * (rowSize * 2 - HIGHLIGHTED_ITEM_SIZE) + itemIndexCount
          : highlightedItems?.length * (rowSize * 2 - HIGHLIGHTED_ITEM_SIZE) +
            (rowIndex - highlightedItems?.length) * (rowSize * 2) +
            itemIndexCount;
      if (!isHighlightedInner) itemIndexCount++;
      return (
        <S.VirtualItem
          key={`item-${rowIndex}-${index}`}
          isHighlighted={isHighlightedInner}
        >
          {isHighlightedInner
            ? renderHighlightedItem
              ? renderHighlightedItem(highlightedItems[rowIndex])
              : null
            : renderItem(items[itemIndex])}
        </S.VirtualItem>
      );
    });
  };