Bootstrap 5 Tab Content not displayed inside OwlCarousel2 Item

Hi I'm trying to add the Tabs Component inside OwlCarousel2 Item but the Tab Content not displayed where this error is coming from?

I try to fix this issue but nothing is work.

**I made some examples here to show you the issue **

HTML CODE :

<section id="example-carousel">
    <div class="owl-carousel owl-theme">
        <div class="w-100 vh-100 d-flex align-items-center">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 col-xl-10">
                        <div class="item">
                            <h1>What is Lorem Ipsum?</h1>
                            <p>
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                            </p>
                        </div>
                    </div>
                    <div class="col-12">
                        <!-- Tab -->
                        <div>
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-link active" id="nav-example1-tab" data-bs-toggle="tab" href="#nav-example1" role="tab" aria-controls="nav-example1" aria-selected="true">Example 1</a>
                                    <a class="nav-link" id="nav-example2-tab" data-bs-toggle="tab" href="#nav-example2" role="tab" aria-controls="nav-others" aria-selected="false">Example 2</a>
                                </div>
                            </nav>
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="nav-example1" role="tabpanel" aria-labelledby="nav-example1-tab">
                                    <h3>Tab Pane Example 1</h3>
                                </div>
                                <div class="tab-pane fade" id="nav-example2" role="tabpanel" aria-labelledby="nav-example2-tab">
                                    <h3>Tab Pane Example 2</h3>
                                </div>
                            </div>
                        </div>
                        <!-- End Tab -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

JS CODE :

jQuery(document).ready(function($) {
    // OwlCarousel2
    var owl = $('.owl-carousel');
    owl.owlCarousel({
            loop:true,
            margin:0,
            nav:false,
    });

});