title: Redux DropdownMenu element going out of div
body: <p>Sorry this may be badly described but will try to describe this as best as I can:</p>
  <p>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.</p>
  <p><a href="https://i.stack.imgur.com/cioFT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cioFT.png" alt="enter image description here" /></a></p>
  <p>The code for the menu is below,</p>
  <p>Dropdown.js</p>
  <pre class="lang-js prettyprint-override"><code>import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
  
  export default function dropdownUserProfileMenu (){
    return (
    &lt;&gt;
      &lt;DropdownMenu.Root&gt;
        &lt;DropdownMenu.Trigger className='trigger'&gt;Settings&lt;/DropdownMenu.Trigger&gt;
  
        &lt;DropdownMenu.Content&gt;
          &lt;DropdownMenu.Item&gt;New Item&lt;/DropdownMenu.Item&gt;
          &lt;DropdownMenu.Item&gt;New Item 2&lt;/DropdownMenu.Item&gt;
          &lt;DropdownMenu.Item&gt;New Item 3&lt;/DropdownMenu.Item&gt;
          &lt;DropdownMenu.Item&gt;New Item 4&lt;/DropdownMenu.Item&gt;
        &lt;/DropdownMenu.Content&gt;
      &lt;/DropdownMenu.Root&gt;
    &lt;/&gt;
    )
  };
  </code></pre>
  <p>Menu.js</p>
  <pre class="lang-js prettyprint-override"><code> &lt;div className='w-screen mr-3 h-16 drop-shadow-md rounded-sm bg-white'&gt;
              &lt;div className='container px-4 md:px-0 h-full mx-auto flex justify-between items-center shadow-md'&gt;
                  &lt;div className='text-primaryBlack'&gt;
                      &lt;Link href='/'&gt;&lt;p className='pl-4'&gt;Student sharing site&lt;/p&gt;&lt;/Link&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;ul id='menuElements' className={`right-0 px-10 py-16 text-primaryBlack z-50 flex mx-auto flex-row space-x-4 items-center`}&gt;
                          &lt;Link href='/about'&gt;&lt;li&gt;About&lt;/li&gt;&lt;/Link&gt;
                          &lt;li&gt;&lt;dropdownUserProfileMenu&gt;&lt;/dropdownUserProfileMenu&gt;&lt;/li&gt;
                          &lt;Link href='/api/auth/signout'&gt;&lt;li onClick={e =&gt; {
                              e.preventDefault()
                              signOut()
                          }}&gt;Signout&lt;/li&gt;
                          &lt;/Link&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          // &lt;/div&gt;
  </code></pre>
  <p>(Ignore the signin/signout methods, am using NextAuth specifically but this is not needed to get this working)
  Hope helping for this is possible!</p>