Using Dropdown Menu for Navigation Menu causing users unable to move between links

[iankduffy]

Hello, I have a menu which is built using Dropdown Menu however recently noticed it doesn't allow uses to move between the links correctly.

I have recreated the basic logic here.

I was expecting the user to be able to arrow keys in-between items in the list what I have noticed is to move items I need to use the first letter of it name to move to it, so to the user it looks stuck.

'use client'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import Link from 'next/link'
import { forwardRef } from 'react'

const menuItems = [
    {href: '?page=1', text: 'Hello'},
    {href: '?page=2', text: 'second'},
    {href: '?page=23', text: 'third'},
]

const MenuItem = forwardRef<HTMLAnchorElement, {href: string, text: string}>(({href, text}, ref) => {
    return <Link href={href} ref={ref}>{text}</Link>
})

export function Menu() {
    return (
        <DropdownMenu.Root>
            <DropdownMenu.Trigger asChild>
                <button>Open</button>
            </DropdownMenu.Trigger>
            <DropdownMenu.Content>
                {menuItems.map((item) => (
                    <DropdownMenu.Item asChild key={item.href}>
                        <MenuItem href={item.href} text={item.text} />
                    </DropdownMenu.Item>
                ))}
            </DropdownMenu.Content>
        </DropdownMenu.Root>
    )
}

I did spot there is a navigation menu in the radix library now, so not sure if I need to move to that.