Custom Wordpress Nav with wp_nav_menu function

I am struggling to get the wp_nav_menu function working with my custom html. I have tried looping over the items but had no success hence why I went back to the native function.

I have attached the order of the menu items in wordpress and the HTML I am trying to loop over with the values I am tying to insert in them. The duplicate pages are just so other menu sections have pages.

Menu Order in WP

1. What We Do(parent)

   • Sectors(child of parent)
     • Audit(child of child)
     • Component
   • Solutions
     • Blog Single
     • Case Studies
   • Products

2. Resources

   • Component
   • Case Studies
   • Blog Single
   • Blog

3. About

   • Component
   • Case Studies
   • Blog Single

4. Case Studies

HTML for looping over

          <!-- Should loop per parent  -->  
          <div class="header-dropdown w-dropdown>

            <div class="header-dropdown-toggle w-dropdown-toggle">
              <div class="dropdown-text">{parent.title}</div>
            </div>

            <nav class="mega-menu-container w-dropdown-list">
              <div class="w-layout-grid mega-menu-grid v3">

                <!-- Should loop per child of the parent  -->                
                <div class="mega-menu-column-1">
                  <h4 class="mega-menu-title">{parent.children.title}</h4>

                    <!-- Should loop per child of child  -->
                    <div class="mega-menu-links">
                      <a href="{parent.children.children.url}" class="mega-menu-link">{parent.children.children.title}</a>
                    </div>
                </div>
              </div>
            </nav>
          </div>

Any help is greatly appreciated!

source https://stackoverflow.com/questions/70643817/custom-wordpress-nav-with-wp-nav-menu-function