Razor modal component with GUID as ID

Question

Can someone explain why there is a bug here in certain situations?

I created modal as a razor component with GUID ID like you can see below. When I am trying to open the modal component by clicking a button as it is shown below, I am getting same error like is on the screenshot.

At first I thought error appears because Guid ID was generating wrong, but the modal ID and the button data-bs-target that invokes are the same. The error disappears when I set Modal ID to static or when there is a very large number of elements on the page which is generated.

Code from index page:

        <div class="row alignToEnd ">
        <button class="roundButton " data-bs-toggle="modal" data-bs-target="#@modalPickerDevice.ID"><i class="fas fa-plus"></i></button>
    </div>
<ModalPickerDevice @ref="modalPickerDevice"/>

@code{
    protected ModalPickerDevice modalPickerDevice = new();
}

Razor component:

<div class="modal fade " id="@ID" aria-hidden="true" aria-labelledby="exampleModalLabel" tabindex="-1" style="overflow-x: auto;">
<div class="modal-dialog">
    <div class="modal-content ">
        <div class="modal-header">
            <h5 class="modal-title"></h5>
            <button type="button" class="btn-close py-0" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

        </div>

    </div>
</div>
</div>
@code{
    public string ID { get; private set; } = $"ModalPickerDevice{Guid.NewGuid()}";
}