Submenus with recursive submenus

Question

I have been able to create a menu with submenus using wp_get_nav_menu_items, but I am unable to create submenus with submenus recursively

This is the code I used for my menu with submenus

I have this method in a class called Helpers 👇

public static function childMenu( $menuArray, $parentId ): mixed {
    $childMenus = [];

    if ( ! empty( $menuArray ) && is_array( $menuArray ) ) {
        foreach ($menuArray as $menu) {
            if ( intval( $menu->menu_item_parent ) === $parentId ) {
                array_push( $childMenus, $menu );
            }
        }
    }
    return $childMenus;
}

And I call it in the menu 👇

<?php

use Src\Helpers;

$locMenuName = get_nav_menu_locations()['kiss-menu-top'];

$menuItems   = wp_get_nav_menu_items( $locMenuName );


    if ( ! empty( $menuItems ) && is_array( $menuItems ) ) {
    foreach ($menuItems as $menItem){
        if ( ! $menItem->menu_item_parent ) {
            $childMenuItems = Helpers::childMenu( $menuItems, $menItem->ID );
            $hasChildren = ! empty( $childMenuItems ) && is_array( $childMenuItems );
            if ( ! $hasChildren ) {
                ?>
                <a href="<?php echo esc_url( $menItem->url ) ?>" class="flex items-center justify-between px-3 shadow  group-hover:[&_svg]:rotate-90 w-full p-2 text-xl text-white bg-[#03222e] shadow-black">
                    <?php echo esc_html( $menItem->title ) ; ?>
                </a>
                <?php
            } else {
                ?>
                <div class="group">
                    <a href="<?php echo esc_url( $menItem->url ) ?>" class="flex items-center justify-between px-3 shadow  group-hover:[&_svg]:rotate-90 w-full p-2 text-xl text-white bg-[#03222e] shadow-black">
                        <?php echo esc_html( $menItem->title ) ; ?>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block size-6 hover:text-orange-500 drop-shadow-lg ">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                            </svg>
                        </span>
                    </a>
                    <div class="z-50 hidden gap-1 text-xl p-1 mt-1 text-gray-800 bg-[#2c1010] shadow shadow-black group-hover:flex  group-hover:flex-col ">
                        <?php
                        foreach ($childMenuItems as $childMenu) {
                            ?>

                            <a class="g border-b border-slate-40 text-[#0dda51] p-1 px-3" href="<?php echo esc_url( $childMenu->url );?>">
                                <?php echo esc_html( $childMenu->title );?>
                            </a> 
                            <?php
                        }
                        ?>
                    </div> 
                </div>
                <?php
            }
            
        }

        ?>
        
        <?php
    }
} else {
    ?>
    <div class="p-4 text-2xl text-center rounded-md shadow bg-indigo-950 shadow-black">
        <?php echo "No hay menú aun ... 😒"; ?> 
    </div> 
    <?php
}

My problem is that I can't get the submenus to have their own submenus and so on recursively.

How could I improve this code so that I can get recursive submenus?

What I intend is that just as this menu has submenus, the submenus have submenus.