listItemHasChildrenClass not working for me

[juanfernandes]

This is the code I am using:

 {{ collections.all | eleventyNavigation | eleventyNavigationToHtml({
     listElement: "ul",
     listItemElement: "li",

     listClass: "[ nav-main ] [ flex flex-row items-center ] [ uppercase ]",

     listItemClass: "[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]",

     listItemHasChildrenClass: "test",

     activeListItemClass: "[ border-secondary ][ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]",

      activeKey: eleventyNavigation.key,

      showExcerpt: false
}) | safe }}

The HTML that is rendered:

<ul class="[ nav-main ] [ flex flex-row items-center ] [ uppercase ]"><li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ] [ border-secondary ][ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/">Home</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/tyres/">Tyres</a><ul><li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/goodyear/">Goodyear</a></li></ul></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/wheels/">Wheels</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/services/">Services</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/batteries/">Batteries</a></li>
<li class="[ border-b-2 border-primary_bg ] [ pb-1 ] [ outline-none hover:border-secondary focus:border-secondary ] [ transition-all motion-reduce:transition-none duration-300 ease-in-out ]"><a href="/about-us/">AboutUs</a></li></ul>

I expected the LI's that have a UL (children) to have a class of 'test' but as you can see, thats not the case.

Do I need to add any front matter to the parent page to say it has children?

What have I done wrong?