How to create an array of Grid components and set references in Blazor application?

 
@using Syncfusion.Blazor.Grids
 
@foreach (var id in GridIDs)
{
    <h2>@id</h2>
    <SfGrid @ref="myComponents[id]" DataSource="@Orders" AllowPaging="true">
    </SfGrid>
}
 
 
@code{
    private List<string> GridIDs = new List<string> { "Grid1", "Grid2", "Grid3", "Grid4" };
    private Dictionary<string, SfGrid<Order>> myComponents = new Dictionary<string, SfGrid<Order>>();
    public List<Order> Orders { get; set; }
 
    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 5).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }
 
    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}