How to use react router NavLink correctly with React Aria's NavigationTreeItem component

In my React app, I want to create a primary navigation with React Aria's NavigationTreeItem component, but also incorporate the NavLink component from react router so that the app updates the way a React app should when a user clicks one of the links. I can get the NavLinks to function correctly when I pass a NavLink into NavigationTreeItem's render prop:

<NavigationTreeItem
    id={props.path}
    href={`/${props.path}`}
    textValue={props.textValue}
    render={(domProps) => (
        <NavLink to={props.path} {...domProps}>
            {props.icon} <strong>{props.textValue}</strong>
        </NavLink>
    )}
    className={`relative flex items-center pl-2 gap-2 text-sm bg-blue-mid h-9.5! ${styles.navItem}`}
>
    <></>
</NavigationTreeItem>

However, in the browser console this results in a warning:
Unexpected DOM element returned by custom `render` function. Expected <div>, got <a>. This may break the component behavior and accessibility.

If I wrap the NavLink in a <div>, the warning goes away:

<NavigationTreeItem
    id={props.path}
    href={`/${props.path}`}
    textValue={props.textValue}
    render={(domProps) => (
        <div {...domProps}>
            <NavLink
                to={props.path}
                className="relative flex items-center h-9.5 pl-2 gap-2 text-sm"
            >
                {props.icon} <strong>{props.textValue}</strong>
            </NavLink>
        </div>
    )}
    className={`bg-blue-mid ${styles.navItem}`}
>
    <></>
</NavigationTreeItem>

BUT: with this structure, the NavLinks stop functioning as they should: clicking on a link causes the browser to reload, as though the links are just standard <a> tags. Hoping someone has found a solution to this issue.