Modal not pop up bootstrap5

<button type="button" class="btn btn-icon rounded-circle btn-outline-danger"
    data-bs-toggle="modal" data-bs-target="#default{{ $Country->id }}">
    "trash-2">
</button>

<div class="modal fade text-start" id="default{{ $Country->id }}" tabindex="-1"
            aria-labelledby="myModalLabel1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel1">Basic Modal</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <h5>Check First Paragraph</h5>
                        <p>
                            Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie
                            carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie
                            chocolate cake liquorice.
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Accept</button>
                    </div>
                </div>
            </div>
        </div>