How to use the bootstrap 5 theme for select2

I followed the instructions here but it makes no difference to the look of the select box.

https://apalfrey.github.io/select2-bootstrap-5-theme/

Here is everything I imported as I know the order is important:

<!-- Styles -->
        
        <!-- Bootstrap -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
        <!-- Select2 -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
        <!-- Select2 Bootstrap theme -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
        
        <!-- Scripts -->
        
        <!-- jquery -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <!-- Bootstrap -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
        <!-- Select2 -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

Here is my javascript file:

$(document).ready(function () {
    $('#students').DataTable();
});

$(document).ready(function () {
    $('#grades').DataTable();
});


$(document).ready(function() {
     $('.js-example-basic-single').select2();
});

$(".js-example-theme-single").select2({
    theme: "bootstrap-5"
  });

And here is the select box, that I’m trying to change the look of:

<div class="mb-3">
            <select class="js-example-basic-single" name="student_id">
                <option disabled="" selected="">student</option>
                {% for student in students %}
                    <option value="{{ student.id }}">{{ student.name }} | Class: {{ student.class }}</option>
                {% endfor %}
            </select>
        </div>