Using a component in a for-loop gives 'Index was outside the bounds' error

Given following code (for Home.razor and WebAssembly blazor app that uses FluentUI for net8.0)

@page "/"<ol>    @for (int i = 0; i < Stuff.Length; i++)    {<li><FluentBadge Appearance="Appearance.Neutral">@Stuff[i]</FluentBadge></li>       }</ol>@code{    private  byte[] Stuff = new byte[] {1,2,3,4,5,6,7};}

I am getting Index was outside the bounds of the array. exception. When I change i < Stuff.Length to i < Stuff.Length-1, then on page I get

1. 72. 73. 74. 75. 76. 7

If I don't use FluentBadge at all (just plain simple <li>@Stuff[i]</li>), then everything seams to work. Why ?

EDIT:If I capture value as a local variable (in scope of a single for loop execution), then it works. But it is still a bit odd.

@page "/"<ol>    @for (int i = 0; i < Stuff.Length; i++)    {        int a = @Stuff[i];<li> <FluentBadge Appearance="Appearance.Neutral">@a</FluentBadge>   </li>       }</ol>@code{    private  byte[] Stuff = new byte[] {1,2,3,4,5,6,7};}

Code above gives me

1. 12. 23. 34. 45. 56. 67. 7