Material-ui Popover, Select, Menus componets positions come wrong, when i give zoom index

i give zoom index to my html, and after that Material-ui Popover, Select and Menus components which is use Material-ui Modal components, positions come wrong

Here is my İndex.css

@media only screen and (max-width: 1500px) {
html{
    zoom:0.8
}}

My Js.

               <Popover
                anchorReference="anchorEl"
                open={Boolean(userMenu)}
                anchorEl={userMenu}
                onClose={userMenuClose}
                anchorOrigin={{
                    vertical: 'bottom',
                    horizontal: 'center'
                }}
                transformOrigin={{
                    vertical: 'top',
                    horizontal: 'center'
                }}
                action={refa}
                classes={{
                    paper: 'py-8'
                }}
            >
                <>
                    <MenuItem onClick={() => changeLanguage('tr')}>
                        <img src="/assets/images/flags/tr.png" alt="tr" 
                         className="flag mr-8" />
                        <ListItemText className="pl-0 " primary="TR" />
                    </MenuItem>
                    <MenuItem onClick={() => changeLanguage('en')}>
                        <img src="/assets/images/flags/en.png" alt="en" 
                         className="flag mr-8" />
                        <ListItemText className="pl-0" primary="EN" />
                    </MenuItem>
                </>
            </Popover>

Thats what should be enter image description here

But thats happen enter image description here