chore: fix UnderlineWrapper html structure (#7097)

Author: francinelucca

.changeset/quiet-terms-juggle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+chore: fix UnderlineWrapper html structure

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.docs.json

@@ -58,6 +58,12 @@
       "type": "boolean",
       "defaultValue": "false",
       "description": "Loading state for all counters. It displays loading animation for individual counters until all are resolved. It is needed to prevent multiple layout shift."
+    },
+    {
+      "name": "as",
+      "type": "React.ElementType",
+      "defaultValue": "'div'",
+      "description": "The HTML element or React component used to render the outermost element."
     }
   ],
   "subcomponents": [

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx

@@ -52,6 +52,10 @@ export type UnderlinePanelsProps = {
    * Class name for custom styling
    */
   className?: string
+  /**
+   * Element type for the tab container
+   */
+  as?: React.ElementType
 }
 
 export type TabProps = PropsWithChildren<{

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

@@ -21,7 +21,7 @@ type UnderlineWrapperProps<As extends React.ElementType> = {
 }
 
 export const UnderlineWrapper = forwardRef((props, ref) => {
-  const {children, className, as: Component = 'nav', ...rest} = props
+  const {children, className, as: Component = 'div', ...rest} = props
   return (
     <Component
       className={clsx(classes.UnderlineWrapper, className)}