Redux DropdownMenu element going out of div - html

Question

Sorry this may be badly described but will try to describe this as best as I can:
What I'm trying to do is put so the Redux dropdown menu dropdown element is an element in the menu (next to about/Signout as shown in the below screenshot).
For some reason the dropdown element is not coming up at all in the menu, but does work in the index file.
The code for the menu is below,
Dropdown.js
import * as DropdownMenu from '#radix-ui/react-dropdown-menu';
export default function dropdownUserProfileMenu (){
return (
<>
<DropdownMenu.Root>
<DropdownMenu.Trigger className='trigger'>Settings</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item>New Item</DropdownMenu.Item>
<DropdownMenu.Item>New Item 2</DropdownMenu.Item>
<DropdownMenu.Item>New Item 3</DropdownMenu.Item>
<DropdownMenu.Item>New Item 4</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</>
)
};
Menu.js
<div className='w-screen mr-3 h-16 drop-shadow-md rounded-sm bg-white'>
<div className='container px-4 md:px-0 h-full mx-auto flex justify-between items-center shadow-md'>
<div className='text-primaryBlack'>
<Link href='/'><p className='pl-4'>Student sharing site</p></Link>
</div>
<div>
<ul id='menuElements' className={`right-0 px-10 py-16 text-primaryBlack z-50 flex mx-auto flex-row space-x-4 items-center`}>
<Link href='/about'><li>About</li></Link>
<li><dropdownUserProfileMenu></dropdownUserProfileMenu></li>
<Link href='/api/auth/signout'><li onClick={e => {
e.preventDefault()
signOut()
}}>Signout</li>
</Link>
</ul>
</div>
</div>
</div>
// </div>
(Ignore the signin/signout methods, am using NextAuth specifically but this is not needed to get this working)
Hope helping for this is possible!