Newly added items cannot move in gridstack.js?

MainPage.razor

<button @onclick="@AddItem">Add</button><GridStackComponent GridStackId="grid-stack-1" PlaceholderItems="@placeholdersbefore" />@code {    public record Placeholder(string Id, string Name, int x, int y, int w, int h);    List<Placeholder> placeholdersbefore = new() {        new(Guid.NewGuid().ToString(), "TEST1", 0, 0, 12, 2),        new(Guid.NewGuid().ToString(), "TEST2", 0, 2, 12, 2)};    protected async void AddItem()    {        placeholdersbefore.Add(new(Guid.NewGuid().ToString(), "TEST3", 0, 4, 6, 2));        StateHasChanged();    }}

GridStackComponent.razor

@using System.Text.Json<div class="row" style="margin-top: 20px"><div class="col-md-6" style="border:1px dotted gray;"><div class="grid-stack">            @foreach (var p in PlaceholderItems)            {<div class="grid-stack-item" gs-id="@p.Id" gs-x="@p.x" gs-y="@p.y" gs-w="@p.w" gs-h="2" ><div class="grid-stack-item-content">@p.Name</div></div>            }</div></div></div>@code {    [Inject]    public IJSRuntime JSRuntime { get; set; }    [Parameter]    public string GridStackId { get; set; } = "";    [Parameter]    public List<Placeholder> PlaceholderItems { get; set; }    protected override void OnInitialized()    {        JSRuntime.InvokeVoidAsync("DotNetReference.init", DotNetObjectReference.Create(this));    }    protected override async Task OnAfterRenderAsync(bool firstRender)    {        await JSRuntime.InvokeVoidAsync("InitiateGridStack");    }    [JSInvokable("OnWidgetChanged")]    public void OnWidgetChanged(string changeSet)    {    }}

JS code

window.InitiateGridStack = function () {    window.grids = GridStack.initAll({        margin: 1    });}

I'm using Gridstack.js with Blazor server application. I want to add/remove items dynamically from the gridstack.

When I click Add button, it adds the new widget to the list and re-renders the gridstack. But the newly added item cannot move. Its locked. How can I fix this issue?