Problem with scrolling after clicking the nav button - reactjs

Question

After clicking on the "login" button that is inside the navbar, the vertical scroll disappears and after leaving the button it comes back. The Scroll should remain unchanged, but for some reason it has this unwanted behavior.
The code in codesandbox is in this link
I've already tried using overflow: "auto", overflow-y and it didn't work. How to solve this problem? Can someone help me?

Answer 1

Just add disableScrollLock={true} to Menu in ButtonSignIn.tsx
import { useState } from "react";
import { MenuItem, Button, Menu } from "#mui/material";
import { SxProps, Theme } from "#mui/material";
interface IButtonLogin {
children: React.ReactNode | React.ReactNode[];
sx?: SxProps<Theme>;
size?: "small" | "medium" | "large";
}
export const ButtonSignIn = ({ children, sx }: IButtonLogin) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleLogin = () => {
setAnchorEl(null);
window.location.href = "https://www.google.com/";
};
return (
<div>
<Button
onClick={(event) => setAnchorEl(event.currentTarget)}
color="inherit"
sx={sx}
>
{children}
</Button>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
anchorOrigin={{
vertical: "top",
horizontal: "right"
}}
keepMounted
transformOrigin={{
vertical: "top",
horizontal: "right"
}}
open={open}
onClose={() => setAnchorEl(null)}
disableScrollLock={true}
>
<MenuItem onClick={() => handleLogin()} key="loginRedirect">
Login here
</MenuItem>
</Menu>
</div>
);
};