Django-select2 с хрустящей формой

В настоящее время я создаю форму. В ней должно быть два поля множественного выбора (pillbox), но они отображаются неправильно. В чем может быть ошибка?

Я уже сделал все необходимые установки и включил его в свой путь

forms.py:

class CreateModuleForm(forms.ModelForm):
    module_lead = forms.ModelChoiceField(queryset=CustomUser.objects.filter(role_fk__name='professor'), label="Module Lead",widget=Select2Widget(attrs={'data-placeholder': 'Select Module Lead', 'class': 'form-control'}))
    professors = forms.ModelMultipleChoiceField(queryset=CustomUser.objects.filter(role_fk__name='professor'), required=False, widget=Select2MultipleWidget(attrs={'data-placeholder': 'Select Professors', 'class': 'form-control', 'data-maximum-selection-length': 10}))
    courses = forms.ModelMultipleChoiceField(queryset=Course.objects.all(), required=False, widget=Select2MultipleWidget(attrs={'data-placeholder': 'Select Courses', 'class': 'form-control', 'data-maximum-selection-length': 10}))
    class Meta:
        model = Module
        fields = ['code', 'name', 'credit', 'start_date', 'end_date', 'enrollment_limit', 'description']
        widgets = {
            'code': forms.TextInput(attrs={'class': 'form-control'}),
            'name': forms.TextInput(attrs={'class': 'form-control'}),
            'credit': forms.NumberInput(attrs={'class': 'form-control'}),
            'start_date': forms.DateInput(format=('%Y-%m-%d'), attrs={'class': 'form-control', 'type': 'date'}),
            'end_date': forms.DateInput(format=('%Y-%m-%d'), attrs={'class': 'form-control', 'type': 'date'}),
            'enrollment_limit': forms.NumberInput(attrs={'class': 'form-control'}),
            'description': forms.Textarea(attrs={'class': 'form-control'}),
        }
    def __init__(self, *args, **kwargs):
        super(CreateModuleForm, self).__init__(*args, **kwargs)
        self.fields['module_lead'].empty_label = None

template.html:

{% extends "admin_lms/base.html" %}
{% load crispy_forms_tags %}
{% load static %}

{% block extrahead %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
{{ form.media.css }}
{% endblock %}

{% block content %}
<div class="container">
    <h2>Create Module</h2>
    <form method="post">
        {% csrf_token %}
        {{ form|crispy }}
        <button type="submit" class="btn btn-success">Create</button>
        <a href="{% url 'index' %}" class="btn btn-secondary">Back</a>
    </form>
</div>
{% endblock %}

{% block extrajs %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
{{ form.media.js }}
<script>
    $(document).ready(function() {
        $('#id_professors').select2();
        $('#id_courses').select2();
    });
</script>
{% endblock %}

прямо сейчас я получаю следующее:

Я хочу, чтобы это выглядело следующим образом:

module_lead = forms.ModelChoiceField(queryset=CustomUser.objects.filter(role_fk__name='professor'), label="Module Lead",widget=Select2Widget(attrs={'data-placeholder': 'Select Module Lead', 'class': 'form-control'}))
professors = forms.ModelMultipleChoiceField(queryset=CustomUser.objects.filter(role_fk__name='professor'), required=False, widget=Select2MultipleWidget(attrs={'data-placeholder': 'Select Professors', 'class': 'form-control', 'data-maximum-selection-length': 10}))
courses = forms.ModelMultipleChoiceField(queryset=Course.objects.all(), required=False, widget=Select2MultipleWidget(attrs={'data-placeholder': 'Select Courses', 'class': 'form-control', 'data-maximum-selection-length': 10}))

 {{ form.media.js }}
<script>
$(document).ready(function() {
    $('#id_professors').select2();
    $('#id_courses').select2();
});