Multi selection is not working for Blazor FluentListbox

I am using Blazor FluentUI and got a problem.The multi select in FluentListbox is not working. Even though it says in the docs:

If true, the user can select multiple elements. ⚠️ Only available for the FluentSelect and FluentListbox components.

The @rendermode I am using here is InteractiveWebAssembly. Data is coming from the API call.Here is my code:

<FluentListbox TOption="DropDown.Item"               Items="@RolesDropdownData?.Items"               Id="roles-listbox"               Multiple="true"               OptionValue="@(p => p.Id)"               OptionText="@(p => p.Value)"               @bind-SelectedOptions="@SelectedRoles"               Class="w-100 mb-10" />@code {    private GetUserById.Response? UserResponse;    private DropDown? RolesDropdownData;    IEnumerable<DropDown.Item>? SelectedRoles;    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (firstRender)        {            var userTask = userService.GetUserByIdAsync(Content);            var rolesDropdownDataTask = dropDownService.GetRolesDataAsync();            await Task.WhenAll(userTask, rolesDropdownDataTask);            UserResponse = await userTask;            RolesDropdownData = await rolesDropdownDataTask;            StateHasChanged();        }    }}

I have enabled Multiple true but still it is not allowing me select multiple options at once as shown in image:

Am I missing something here?

Thanks in advance.