underlinenav console error and pass props down

Author: broccolinisoup

src/UnderlineNav2/UnderlineNav.tsx

@@ -138,6 +138,7 @@ export const UnderlineNav = forwardRef(
       sx: sxProp = defaultSxProp,
       loadingCounters = false,
       children,
+      ...props
     }: UnderlineNavProps,
     forwardedRef,
   ) => {
@@ -175,7 +176,7 @@ export const UnderlineNav = forwardRef(
     // This is the case where the viewport is too narrow to show any list item with the more menu. In this case, we only show the dropdown
     const onlyMenuVisible = responsiveProps.items.length === 0
 
-    if (__DEV__) {
+    if (__DEV__ && process.env.NODE_ENV !== 'test') {
       // Practically, this is not a conditional hook, it is just making sure this hook runs only on DEV not PROD.
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useEffect(() => {
@@ -308,6 +309,7 @@ export const UnderlineNav = forwardRef(
           sx={merge<BetterSystemStyleObject>(getNavStyles(theme), sxProp)}
           aria-label={ariaLabel}
           ref={navRef}
+          {...props}
         >
           <NavigationList sx={ulStyles} ref={listRef} role="list">
             {listItems.map(listItem => {