title: Popover menu renders in different place than the anchor element
body: <p>I'm implementing a menu that opens when the user clicks on an Avatar. The problem is that the menu is rendering in a completely different place:</p>
  
  <p><a href="https://i.stack.imgur.com/955eJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/955eJ.png" alt="wrong location"></a></p>
  
  <p>The avatar is the green "OB" button on the right. There is no console error and inspecting the <code>Popover</code> element, it's receiving the <code>anchorEl</code> prop:</p>
  
  <p><a href="https://i.stack.imgur.com/f55XP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/f55XP.png" alt="popover props"></a></p>
  
  <p>The language menu, on the right of the avatar, renders just fine, opening where it should open. My code seems fine, I'm really not sure why the position is wrong:</p>
  
  <pre><code>export function DashboardNavbar({ setDrawer }) {
      // translation hook
      const { i18n } = useTranslation("navbar");
  
      // config drawer state
      const [configDrawer, setConfigDrawer] = useState(false);
  
      // config menu state
      const configMenuState = usePopupState({
          variant: "popover",
          popupId: "configMenu"
      });
  
      // avatar id
      const [cookie] = useCookies("userInfo");
      const decodedToken = decodeToken(cookie.userInfo.token);
      const avatarId =
          decodedToken.firstName.charAt(0) + decodedToken.lastName.charAt(0);
  
      function DesktopNavbar() {
          return (
              &lt;&gt;
                  &lt;StyledDashboardNavbar&gt;
                      &lt;Container maxWidth="lg"&gt;
                          &lt;div
                              style={{
                                  display: "flex",
                                  justifyContent: "flex-end"
                              }}
                          &gt;
                              &lt;Avatar
                                  style={{
                                      backgroundColor:
                                          theme.palette.secondary.main
                                  }}
                                  {...bindTrigger(configMenuState)}
                              &gt;
                                  {avatarId}
                              &lt;/Avatar&gt;
                              &lt;DashboardMenu
                                  bindMenu={bindMenu}
                                  menuState={configMenuState}
                              /&gt;
                              &lt;LanguageMenu i18n={i18n} /&gt;
                          &lt;/div&gt;
                      &lt;/Container&gt;
                  &lt;/StyledDashboardNavbar&gt;
              &lt;/&gt;
          );
      }
  
      function MobileNavbar() {
          return (
              &lt;&gt;
                  &lt;StyledDashboardNavbar&gt;
                      &lt;Container maxWidth="md"&gt;
                          &lt;div className="navbar"&gt;
                              &lt;div
                                  style={{
                                      display: "flex",
                                      alignItems: "center"
                                  }}
                              &gt;
                                  &lt;MenuIcon
                                      color="secondary"
                                      onClick={() =&gt; setDrawer(true)}
                                  /&gt;
                              &lt;/div&gt;
                              &lt;div
                                  className="logo"
                                  onClick={() =&gt; setConfigDrawer(true)}
                              &gt;
                                  &lt;Avatar
                                      style={{
                                          backgroundColor:
                                              theme.palette.secondary.main
                                      }}
                                  &gt;
                                      {avatarId}
                                  &lt;/Avatar&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/Container&gt;
                  &lt;/StyledDashboardNavbar&gt;
                  &lt;AvatarDrawer
                      drawer={configDrawer}
                      setDrawer={setConfigDrawer}
                  /&gt;
              &lt;/&gt;
          );
      }
  
      return window.innerWidth &gt; 480 ? &lt;DesktopNavbar /&gt; : &lt;MobileNavbar /&gt;;
  }
  </code></pre>
  
  <p>I'm using the <code>material-ui-popup-state</code>, but I tried implementing "on-hand" without this package and the result was the same.</p>
  
  <p>Any help on this is appreciated. Thanks in advance</p>