jQuery.Deferred exception: $(…).select2 is not a function

I have a searchable dropdown in file “index.php” and I am trying to populate the dropdown options using jQuery. Using jQuery I am making an ajax request to fetch data from mySQL database through file “get_states.php”.
index.php is like this :

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected] 
rc.1/dist/js/select2.min.js"></script>

<script>
    // Initialize Select2 to load dropdown dynamically
    $(document).ready(function() {
        $('.select2').select2({
            placeholder: 'Search for a state',
            ajax: {
                url: 'get_states.php', // PHP script to fetch states dynamically
                dataType: 'json',
                delay: 250,
                processResults: function(data) {
                    return {
                        results: data
                    };
                },
                cache: true
            }
        });
    }); 

Also from the same index.php file I am making a different ajax request through xhr object to execute “code.php” .However I am getting this error “jQuery.Deferred exception: $(…).select2 is not a function TypeError: $(…).select2 is not a function
at HTMLDocument.”

I want the getstates.php to execute and get the data from database.