[Solved] ASP.Net MVC Razor View Error: object does not contain a definition for key

In my asp.net MVC web application, I created a model like,

[Key]
public int ID { get; set; }

[Required]
public string AccountName { get; set; }

public string Description { get; set; }

public int ? CurrentAccountID { get; set; }
public virtual Accounts ParentAccount { get; set; }

So from the controller, I'm binding the data to the ViewBag like

var accountsGrouped = db.Accounts
    .Include(x => x.ParentAccount) // Include parent accounts
    .Where(x => x.Status == true && x.CompanyID == CompanyID)
    .OrderBy(x => x.ParentAccount.AccountName)
    .GroupBy(x => x.ParentAccount.AccountName) // Group by parent account name
    .ToList();

ViewBag.AccountsGrouped = accountsGrouped;

Then I manually create the selected element and the option and optgroup elements:

<div class="col-sm-8">
    <select id="AccountTypes" name="CurrentAccountID" class="form-select acctype" required oninvalid="this.setCustomValidity('Please Select the Account Type')" oninput="this.setCustomValidity('')">
        <option value="">--Select Account Type--</option>
        @foreach (var group in ViewBag.AccountsGrouped)
        {
            <optgroup label="@group.Key"> <!-- group.Key is the parent AccountName -->
                @foreach (var item in group)
                {
                    <option value="@item.ID">@item.AccountName</option>
                }
            </optgroup>
        }
    </select>
</div>

But here in @group.Key returns an error object' does not contain a definition for 'key'

But when I debug the code, I can see the data of group.Key as "Bank Account". But still, it says as an error.