select does not appear correctly when included in a tabs pan

I am attempting to use an mdb-select control inside a tabs panel, but it doesn't display correctly. Here is the code I am using:

<div id="tabSubCategories">
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12 text-center fs-4 fcDashSlogan">Manage Item Sub-Categories</div>
    </div>
<div class="row mb-4">
    <div class="col-6 offset-3 form-group">
        <select data-mdb-select-init id="selCategory" name="selCategory"></select>
    </div>
</div>
<div class="row mb-2">
    <div class="col-lg-12">
        <div class="table-responsive">
            <table id="tblSubCats" class="tbls display nowrap" style="width: 100%">
                <thead>
                    <tr>
                        <th class="tableHdr">Sub-Category Name</th>
                        <th class="tableHdr">Active?</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
    <div class="row mb-2">
        <div class="col-12 text-center">
            <button id="btnNewSubCategory" name="btnNewSubCategory" class="btn btn250 btn-success">New Sub-Category</button>
        </div>
    </div>
</div>

Here is how it appears:

As you can see from the included screenshot, the select does not properly display. There are no messages in the console, so I don't know what the problem is, but I appreciate your help with it. Thank you!