Nested Nav links rendering incorrectly - two highlight bars

[ptallettms]

Environment Information

• Package version(s): @fluentui/react 8.57.1
• Browser and OS versions: Edge Version 99.0.1150.30 (Official build) (64-bit), Chrome Version 99.0.4844.51 (Official Build) (64-bit)

Please provide a reproduction of the bug in a codepen:

  <Nav
    groups={[
      {
        links: [
          {
            name: "Top",
            url: '',
            key: "key1",
            links: [{
              name: "Level 1",
              url: '',
              key: "key33",
              links: [{
                name: "Level 2",
                url: '',
                key: "key333",
                target: "_blank",
                links: [{
                  name: "Level 3",
                  url: '',
                  key: "key3333",
                }],
              }],
            },
            ]
          }
        ],
      },
    ]}
  />

Actual behavior:

Also loses the icon if present (all of the items should have an icon):

Expected behavior:

Link is showing two blue bars, expected 1 blue bar Only happens on nested links with children, not top level (ie Top and Level 3 are okay, Level 1 and Level 2 show this behaviour)

Priorities and help requested:

Either a fix or a styling workaround

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low): Normal

Products/sites affected: (if applicable)

Nav components with nested links

[micahgodbolt]

confirmed the bug via https://codepen.io/micahgodbolt/pen/wvpxdPb?editors=0010