[Bug]: Next 16: Hydration issues

[benjyAuthi]

Prerequisites

• I have searched existing issues to ensure this bug hasn't been reported already
• I have tested this with the latest version of the components

Bug description

I'm facing annoying hydration issues that happens maybe 3 in 5 page refreshes.

"next": "16.1.7"
"react": "^19.2.4",
"react-aria": "^3.47.0",
"react-aria-components": "^1.16.0",

The AccountSidebarDialog is essentially just the "AriaTriggerDialog" part of the code from https://www.untitledui.com/react/components/sidebar-navigations (slim)

"use client";
import { NavAccountMenu } from "@/primitives/base-components/nav/nav-account-card";
import { Avatar } from "@/primitives/base/avatar/avatar";
import { cx } from "@/utils/cx";
import { AuthiUser } from "@/utils/types";
import { useId } from "react";
import { Button as AriaButton, DialogTrigger as AriaDialogTrigger, Popover as AriaPopover } from "react-aria-components";

export const AccountSidebarDialog = ({
	user,
	updateSession
}: {user: AuthiUser, 
	updateSession?: (formData: FormData) => Promise<{ success: boolean }>}) => {

	const id = useId()
	const triggerId = `account-menu-trigger-${id}`
	const hintId = `account-menu-hint-${id}`

	return (<AriaDialogTrigger>
				<AriaButton
					id={triggerId}
					aria-describedby={hintId}
					className={({ isPressed, isFocused }) =>
						cx("group relative flex px-3 items-center rounded-full cursor-pointer", "hover:bg-secondary/90")
					}
				>
					<Avatar status="online" src={user?.picture||''} size="md" alt={user?.name || 'User'} />
					
					<div className={cx(
						"relative flex items-center gap-3 border-t border-secondary pr-8 pl-3",
					)}>
                            <div>
                                <p className="text-sm font-semibold text-primary">{user?.name}</p>
                                <p className="text-sm text-tertiary">{user?.email}</p>
                            </div>
                        </div>
				
				</AriaButton>
				<AriaPopover
					placement="right bottom"
					offset={8}
					crossOffset={6}
					className={({ isEntering, isExiting }) =>
						cx(
							"will-change-transform",
							isEntering &&
								"duration-300 ease-out animate-in fade-in placement-right:slide-in-from-left-2 placement-top:slide-in-from-bottom-2 placement-bottom:slide-in-from-top-2",
							isExiting &&
								"duration-150 ease-in animate-out fade-out placement-right:slide-out-to-left-2 placement-top:slide-out-to-bottom-2 placement-bottom:slide-out-to-top-2",
						)
					}
				>
					<NavAccountMenu updateSession={updateSession} user={user as AuthiUser}/>
				</AriaPopover>
			</AriaDialogTrigger>)
}

I'm also getting Hydration mismatch errors in Navtabs and buttons

My gut says it's a react-aria issue, but I figured I'd bring it up here.

Steps to reproduce

Unfortunately because I can't figure out the exact reason it's happening i don't have a reproduceable example and it only happens a few times every couple refreshes

Expected behavior

No hydration issue

Actual behavior

Hydration issue

Code example

Browser

Chrome

Device type

Desktop

Component version

v8.0

Environment details

OS: Mac OS,
node: 22.22

Screenshots/Videos

No response

Console errors

Additional context

No response

Accessibility impact

• This bug affects keyboard navigation
• This bug affects screen reader users
• This bug affects focus management
• This bug affects color contrast or visual accessibility