Make a Table of Contents Affix inside each Accordion Bootstrap on the same page

Question

I am developing a page that has several Accordions with a large amount of text inserted inside each and, thinking about the usability and ease of use of the page, I thought I would try to add a Table of Contents.

But with every search I did, I couldn’t find a way to add something that specific. For, in the documentation of this TOC, it informs only to add attributes to the body tag, and as much as I tried to specify the scope of TOC, it still recognized all the h headers of the whole page. Below is an image of how he is behaving.

Note that Toc is searching for other headers, such as the "Faqs - Workbench", but Footsteps, which is an H3, does not appear and should appear if we roll the page down, but the Nav does not follow, besides "Workbench formatting", an H2, appears.

I’ll present the code now. Follow the head header with libraries and javascript.

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />

    <!-- Bootstrap Table of Contents CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-toc.min.css" />

    <title>FAQs - Bancada</title>

    <!-- Jquery -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>

    <!-- Bootstrap js -->
    <script src="js/bootstrap.bundle.min.js"></script>

    <!-- Table of Contents js -->
    <script type="text/javascript" src="js/bootstrap-toc.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {

            $(function () {
                var $myToc = $('#toc');
                Toc.init($myToc);
                $('#collapseOneFormatacao').scrollspy({
                    target: $('#toc')
                });
            });

            Toc.init({

                // The element that the navigation will be created in
                $nav: $('#toc'),

                // The element where the search for headings will be limited to
                $scope: $('#collapseOneFormatacao')

            });
        });
    </script>

Now follow the html.

<!-- Formatacao -->
<div class="accordion" id="accordionFormatacao">

    <!-- Formatacao na bancada -->
    <div class="card">
        <div class="card-header" id="headingOneFormatacao">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse"
                    data-target="#collapseOneFormatacao" aria-expanded="true"
                    aria-controls="collapseOneFormatacao">
                    Formatação na bancada
                </button>
            </h2>
        </div>

        <div id="collapseOneFormatacao" class="collapse" aria-labelledby="headingOneFormatacao"
            data-parent="#accordionFormatacao" data-spy="scroll" data-target="#toc">
            <div class="card-body">

                    <div class="row">

                        <div class="col-sm-3">
                            <nav id="toc" data-spy="affix" data-toggle="toc"></nav>
                        </div>

                        <div class="col-sm-9">

                            <h3>Passo a passo</h3>

                            <p>Como utilizamos um servidor de imagem, preparamos a máquina com o básico:
                            </p>

                            ...

                        </div> <!-- ./col-sm-9 -->
                    </div> <!-- ./row -->
            </div> <!-- ./card-body -->
        </div> <!-- ./collapseOneFormatacao -->
    </div> <!-- ./Formatacao na bancada -->

<!-- Formatacao remota -->
    <div class="card">
        <div class="card-header" id="headingFourFormatacao">
            <h2 class="mb-0">
                <button class="btn btn-link btn-block text-left collapsed" type="button"
                    data-toggle="collapse" data-target="#collapseFourFormatacao" aria-expanded="false"
                    aria-controls="collapseFourFormatacao">
                        Formatação remota
                </button>
            </h2>
        </div>
                    
        <div id="collapseTwoFormatacao " class="collapse" aria-labelledby="headingFourFormatacao" data-parent="#accordionFormatacao">
                <div class="card-body">
                    ...
                </div> <!-- ./card-body -->
        </div> <!-- ./#collapseTwoFormatacao -->
    </div> <!-- ./Formatacao remota -->
</div> <!-- ./accordionFormatacao -->

Am I missing something silly or is the problem so specific that it requires special treatment? Remembering that more down there are other Accordions and in them I want to do other Toc, each one would receive a Toc for the content they have.

Edit:

I created a Jsfiddle to show better what I mean:

Jsfiddle