Adding/Removing Blazor components dynamically (Panzoom)

Question

I am trying to create something like a map that i can add pins of points of interest on it. I am using this library just for reference ( https://github.com/shaigem/BlazorPanzoom).

The problem i have is adding pins works (with some minor issues like flickering but i will get there), but when i want to remove a pin if i remove the last one i added it seems to work fine, but if i remove any pin other than the last one every pin position resets to 0,0 and i cant drag them any more. I suspect it has something to do with the @key="mapPins[x].Id" value of the pins but i cant figure out what exactly is wrong with it.

Here is my components

`<Panzoom Context="pz" @ref="_panzoom" PanzoomOptions="@parentOptions" >
            <div @ref="pz.ElementReference" class="panzoom" style="border: 2px dotted; margin: 0 auto;">
                @if (mapPins != null)
                {
                    @for(int i=0; i<mapPins.Count; i++)
                    {
                        int x = i;
                        <Panzoom @key="mapPins[x].Id" @ref="mapPins[x].me" SetTransform="e => SetTransformCustom(e,mapPins[x].me)">
                            <ContextMenuTrigger MenuId="myMenu" Data="mapPins[x]">
                                    <div @ref="mapPins[x].me.ElementReference" style="width: 50px; height:50px; position:absolute;
                                                              margin: 0 auto;
                                                              background-color: #33DDDD;
                                                              border: 1px solid #000000;
                                                              color: black;
                                                              text-align: center>
                                    </div>
                             </ContextMenuTrigger>
                        </Panzoom>
                    }
                }
            <RazorClassLibrary.RazorPages.Components.ImageBrowser monImage="Assets//Monsters//map.jpeg" ></RazorClassLibrary.RazorPages.Components.ImageBrowser>
            </div>
        </Panzoom>`

here i instantiate 100 @refs to use for the pins, i got this from a reddit forum and it seems to be the way to do it.

`public Dictionary<String, Panzoom> DisplayRef { get; set; } = new Dictionary<string,Panzoom>();
    public List<String> NotDisplay { get; set; } = new List<string>();
    List<PinModel> mapPins = new List<PinModel>();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            for (int i = 0; i < 100; i++)
            {
                NotDisplay.Add(i.ToString());

                DisplayRef.Add(i.ToString(), new Panzoom());
            }
        }
    }`

I have a button that adds pins

`private async Task AddPin(MouseEventArgs args){
         //Here i save the position of all the displayed pins
         await CalculatePosition();

         mapPins.Add(new PinModel());
         mapPins[mapPins.Count - 1].details.header = "Name me " + counter;

         mapPins[mapPins.Count - 1].me = DisplayRef[NotDisplay[counter].ToString()];
         mapPins[mapPins.Count - 1].Id = counter.ToString();
         counter++;

         //Because when i add a new pin the position of all pins reset to 0,0 i move them again to their last position
         await FixPosition();
    }`

`public async Task FixPosition(){
        foreach (var item in mapPins)
        {
           await item.me.SetStyleAsync("transform", item.details.transform);
        }
    }`

And this is how i remove a pin. I have a right click pop up menu if you wonder how the following function is invoked

`async Task OnClick(ItemClickEventArgs e){
        PinModel temp = (PinModel)e.Data;

        if(e.MenuItem.Id=="delete")
        {
            await CalculatePosition();
            var found = mapPins.IndexOf(temp);
            mapPins.RemoveAt(found);
            await FixPosition();
        }
    }`

i have tried using StateHasChanged() at the end of FixPosition, also i tried hard coding the @key values but still i get the same results.