AdminLTE multi level menu

Question

I am trying to build multi level menu on AdminLTE Flask template where active page menu part is open and current page position is active.

my code:

<!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <!-- Menu: Controll  -->
          <li class="nav-item has-treeview {% if 'controll' in segment %} menu-open {% endif %}">
            <a href="#" class="nav-link {% if 'control' in segment %} active {% endif %}">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                Control
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <!-- SubMenu: Level 1 -->
            <ul class="nav nav-treeview" role=" menuitem">
              <li class="nav-item has-treeview">
                <a href="#" class="nav-link {% if 'controll-skc' in segment %} active {% endif %}">
                  <i class="far fa-circle nav-icon"></i>
                  <p>SKC</p>
                  <i class="right fas fa-angle-left"></i>
                </a>
                <!-- SubMenu: Level 2 -->
                <ul class="nav nav-treeview">
                  <li class="nav-item">
                    <a href="/controll-skc-0" class="nav-link {% if 'controll-skc-0' in segment %} active {% endif %}">
                      <i class="far fa-dot-circle nav-icon"></i>
                      <p>SKC-0</p>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a href="/controll-skc-1" class="nav-link {% if 'controll-skc-1' in segment %} active {% endif %}">
                      <i class="far fa-dot-circle nav-icon"></i>
                      <p>SKC1</p>
                    </a>
                  </li>
              <!-- SubMenu: Level 1 -->
              <li class="nav-item has-treeview" role="menuitem">
                <a href="#" class="nav-link {% if 'control-skd' in segment %} active {% endif %}">
                  <i class="far fa-circle nav-icon"></i>
                  <p>SKD</p>
                  <i class="right fas fa-angle-left"></i>
                </a>
                 <!-- SubMenu: Level 2 -->
                <ul class="nav nav-treeview">
                  <li class="nav-item">
                    <a href="/control-skd-3" class="nav-link">
                      <i class="far fa-dot-circle nav-icon"></i>
                      <p>SKD3</p>
                    </a>
                  </li>
                 </ul> 
              </li>
              
          </li>
        </ul>
      </nav>

The problem is when I open any page form whole control menu and sub menus ar expanded.

the problem is menu open class because is opening all sub menus.

effect i have

effect i would like to have